02:04 Мир PC - | |
Мир PCВсем привет! Давненько не писал в блоге, если честно просто не хватает времени. Куча забот в офлайне, но в скором времени, думаю, все образуется, сам себе готовлю сюрприз. А сегодня я предлагаю вашему вниманию урок по верстке PSD макета. Данный урок проходит в рамках совместной программы с Сергеем, автором блога blogohelp, и его фотошоп урока – Как сделать дизайн сайта? Просто! Всем кто еще не знаком, настоятельно рекомендую ознакомиться с предоставленным материалом, все рассказано и показано до мельчайших подробностей. Надеюсь мой урок будет тоже легок в освоении. И так приступим. В своем арсенале мы уже имеем готовый PSD макет. И для работы с ним нам понадобится следующий софт: 1. Adobe Photoshop – с помощью его мы будем производить нарезку графики. Для лучшего понимания рекомендую скачать готовый макет с версткой и ориентироваться на его код. Практически каждая строка имеет комментарий о том для чего это сделано. Первое что нам надо сделать, это создать папку, куда будем складывать все наши файлы. У меня она располагается на диске D:\urokv. В ней необходимо создать еще 2 папки image и slider. В первой будут содержаться наши изображения, во вторую мы сложим файлы, предназначенные для слайдера. Теперь открываем макет сайта в фотошопе и запускаем дримвивер. В дриме создаем html страницу, называем ее index.html и сохраняем в папку urokv. Одним каркасом нам не обойтись, нам необходимо подключить к сайту файл с CSS стилями. Для этого так же создаем новый файл, но на этот раз выбираем не html а CSS Теперь давайте перейдем к процедуре подключения файла стилей к html странице. Открываем вкладку index.html в дримвивере. И над тегом title вставляем следующий код link rel ="stylesheet" type= «text/css» href ="style.css" / . Тем самым мы сообщаем, что данный сайт должен брать все стили из этого файла. Если хотите проверить, подключился файл стилей или нет. Давайте покрасим наш бэкграунд в черный цвет. Для этого в файле стилей обозначаем цвет у тела сайта: body Теперь давайте взглянем на дизайн нашего сайта. Бэкграунд у него явно не черного цвета. А выполнен с использованием паттерна. (Все необходимые файлы от макета вы можете найти у Сергея на блоге, ссылка на урок с файлами выше) Копируем изображение этого паттерна к нам в папочку image, у меня оно называется fon. Теперь возвращаемся в фотошоп и смотрим на наш макет. Как можете видеть бэкграунд практически везде белый, исключение это шапка сайта и подвал. Ко всему прочему у нашего сайта имеются тени справа и слева. Чтобы получить картинку нашего бэка, отключаем ненужные нам слои на макете. Я полностью отключил группы слоев SIDEBAR и CONTENT. Так же отключил Background и site-fon. В папке с нарезками найден файл с моим бэкраундом толщиной в 1px, после чего успешно скопирован в папку с изображениями нашего сайта. Шириной он вышел в 955 px;
No Man's Sky - Обзор PC версииLEGO Jurassic World {PC} прохождение часть 1 — Мир Юрского ПериодаИнтересные записи | |
|
| |
Страница index.html будет представлять всю структуру нашего сайта, грубо говоря это наш каркас. Еще хочу отметить один момент, в дримвивере при создании страницы автоматически указывается DOCTYPE. Это правило html разметки. Как в другом софте не знаю, но устанавливать DOCTYPE обязательно!
Называем его style. css и сохраняем в ту же папку.
Далее открываем index.html в браузере и любуемся черным экраном.
Открываем в дримвивере вкладку с нашими стилями, убираем этот черный цвет и задаем изображение картинки из бэкграунда. Так же рекомендую сразу же обнулить все отступы от краев браузера.
Ну и сразу же укажем размер шрифта и его тип.
Чтобы освободить пространство для дальнейшей нарезки. Выбираем инструмент раскройка
и шириной в 1px на всю длину выделяем область, которая нам необходима. Как видите, я захватил не только белый фон, а так же тень которая слева и слева.
Далее выбираем файл – сохранить для Web устройств.
В появившемся окне выставляем следующие настройки. Сохранить в png24 и преобразовывать в sRGD.
Для сохранения я создал папку на рабочем столе с названием нарезка, все файлы которые буду резать будут сохранятся там, после чего будет искаться необходимый и копироваться в папку с нашими изображениями для сайта. Не сохраняю сразу в папку сайта по причине того, что будет очень много мусора. Именно таким методом осуществляется нарезка файлов, в последствии они сохраняются либо в png либо jpeg. PNG использую в случаях когда необходим прозрачность, в остальных сохраняю в jpeg. Далее подробно расписывать не буду как нарезаю, буду указывать только области.
| Всего комментариев: 0 | |