Из PSD в HTML

Пришло время научиться верстать макеты. Допустим у нас имеется psd исходник. Как создавать классы для тегов мы знаем, шаблоны для фиксированного и резинового макета у нас уже имеются. Если нет, то скачать их можно из прошлых уроков. И так, вот наш psd исходник:

Из PSD в HTML

Данный макет является фиксированным, имеет две колонки. Скачать его в формате *.psd можно здесь. Этот макет сделан в программе Adobe Photoshop CS5. Для быстрого старта берем заготовку для фиксированного макета с двумя колонками:

Из PSD в HTML

Такой шаблон можно скачать здесь.

В этом уроке мы установим размеры для шапки и колонок, и сделаем фон.

Размеры

Откроем макет в программе Adobe Photoshop, и узнаем ширину основной части. Для этого раскрываем папку Menu в панеле Layers:

Из PSD в HTML

Далее мы выделяем слой с меню, зажимаем клавишу Ctrl и кликаем мышью на красный квадрат, если у вас Adobe Photosop CS3, на серую область справа от квадрата, если у вас CS5. После этого меню будет выделено пунктирной линией:

Из PSD в HTML

Далее нажимаем клавишу f8, чтобы открыть панель INFO, и смотрим размеры блока в пикселях. Если у вас стоят единицы измерения не пиксели, то кликаем два раза по линейке:

Из PSD в HTML

Откроется окно с настройками, и внем нужно указать пиксели (и для rulers, и для type):

Из PSD в HTML

Нажимаем ОК, снова выделяем панель меню и смотрим размеры в панеле INFO:

Из PSD в HTML

Таким же образом измеряем остальные элементы для верстки. (В видео материале показан наименее удобный метод измерения объектов. Видео Панель INFO)

Далее нам нужно сделать картинку для фона, чтобы размножить ее на веб-странице. Советую слишком маленьку не делать, так как на то, чтобы замастить всю область страницы понадобится гораздо больше  ресурсов, чем на более крупный фрагмент фона. Возьмем такой кусок:

Из PSD в HTML

Назовите его bg, и сохраните в формате .*gif или *.jpg, у меня в jpg. File > Save for Web & Devices... Далее выбираем необходимы параметры: расширение, качество. Нажимаем Save, и сохраняем. Все изображения сохраняйте в отдельную папку, например, в папку images

Из PSD в HTML

Дальше открываем файл со стилями, для тега body устанавливаем в виде фона нашу картинку, а для блока .fix устанавливаем ширину 1023px, и убираем фон:

Из PSD в HTML

Папка с изображениями должна лежать в том же месте, где и файл со стилями. Сохраняем изменения. Смотрим результат. У нас должен появиться фон, на всю страницу, так как мы указали значение repeat, т.е. картинка будет повторяться и по горизонтали, и по вертикали. 

Видеоматериал по этому уроку:

http://youtu.be/KYwIY_E2kUM?hd=1

Источник: http://psd-html-css.ru/css/iz-psd-v-html

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Из PSD в HTML | | 2012-04-02 21:40:00 | | Статьи Web-мастеру | | Пришло время научиться верстать макеты. Допустим у нас имеется psd исходник. Как создавать классы для тегов мы знаем, шаблоны для фиксированного и резинового макета у нас уже имеются. Если нет, то | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: