Uniq Themes.ru шаблоны Joomla, темы WordPress

Использование графического редактора Фотошоп в веб-дизайне

01.05.2011 18:46 Автор: Адель

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

Вот как это делается.
Для начала подготовим весь макет. Делать это нужно обычным способом, рисуя или импортируя из своей библиотеки изображений (такие библиотеки кропотливо собирает каждый дизайнер) все элементы дизайна и функциональные элементы (кнопки и иконки). Готовый макет, конечно же, должен полностью соответствовать общей концепции сайта и техническому заданию, переданному заказчиком. Размер макета выбирать нужно тот, что сказал заказчик. Некоторые дизайнеры рекомендуют делать макет размером 600х800 пикселей, но я думаю, что этого делать не стоит хотя бы потому, что на такое графическое разрешение монитора сегодня рассчитывать уже не приходится — такие мониторы если и существуют в природе, то их так мало, что оптимизировать сайт для таких дисплеев значит сознательно ограничивать себя в творчестве.

Очень важно, чтобы кнопки и иконки, то есть функциональные элементы веб-страницы, располагались каждая в отдельном слое.
Как делаю я. Если заказчик не оговаривает размеры макета специально, то я рассчитываю макет по наиболее часто встречающемуся сейчас стандарту 1240х780, хотя уже нередки дисплеи с разрешением больше этого.
Значит, создаем в Фотошопе (я пользуюсь версией CS2, как наиболее привычной) графический файл с размером по длинной стороне 1100 пикселей. Если сделать 1240, то в браузере пользователя, имеющего монитор 1240х780, будет появляться горизонтальная полоса прокрутки, а это не есть гут, а 1100 будет в самый раз, хотя многие делают 1000 пикселей и даже 900 — тогда по краям будет пустое место, которое нужно чем-то заполнять, иногда это оправдано с точки зрения дизайна.
Далее отпускаем направляющие, ограничивая ими области хедера, навигации, контента, футера, сайдбаров и прочего, что необходимо для нормального функционирования сайта. Заливаем или рисуем фон страницы самым первым слоем, рисуем иконки и кнопки или импортируем их из своей библиотеки (для этого создаем следующие слои), рисуем шапку, футер (если нужно), размещаем или рисуем все другие необходимые графические элементы.
Все, макет готов.

Теперь начнется самое интересное. Выключаем все слои с кнопками и иконками — с ними нужно разобраться позже, берем инструмент «ножик» и очень аккуратно, по отпущенным заранее и скорректированным направляющим разрезаем весь макет.
После этого в меню Файл нужно выбрать Сохранить для Web, указав папку для сохранения. В результате в указанной папке сохранится html-файл и в папке images все разрезанные элементы макета. Таким образом мы имеем готовый сверстанный уже html макет.
Тут самое время сказать одно из двух: «Ну, вот и все» или же «Однако...». Придется сказать «Однако».
Неприятности начинаются с изучения получившегося html кода. Он логичен и удобочитаем, но верстка получается только табличная, что часто бывает совершенно неприемлемо для конкретного сайта. Кроме того, все форматирование включено прямо в этот файл. Значит, нужно создавать новый файл листа стилей (CSS), подключать к нему html, а саму страницу лучше переписать div'ами или в смешанном стиле, что иногда является лучшим вариантом. CSS файл подключается простой расположенной где-то между тегами <head> и </head> строчкой

<link rel=”stylesheet” href=”mystyle.css” type=”text/css”>.

Листов (или таблиц, как их еще называют) стилей может быть несколько — в зависимости от сложности верстки или в случае, если оформление разных страниц сайта должно быть различным.
Стилевые таблицы могут быть и внутренними, а могут и сочетаться с внешними, не мешая друг другу. Внутренние таблицы стилей обычно используются, если необходимо какой-либо элемент из ряда подобных сделать оформленным иначе.
Хорошо, что Фотошоп при разрезании макета дает и код верстки. Вот только её необходимо дорабатывать, доводить, так сказать, «до кондиции». В этом заключается существенный недостаток программы. Но если использовать Фотошоп совместно с другой прогой от Adobe — Dreamweaver, то работа существенно облегчается. Еще одним крупным недостатком программы я лично считаю её слишком высокую (для меня) стоимость. Потратиться на Фотошоп я не решалась довольно долго. Теперь вот обновиться нужно — тоже не решаюсь...

А вообще программа Photoshop роскошная, она позволяет приготовить любую графику для любого сайта. Для веб-дизайнера Фотошоп — самая лучшая программа.
Фотошоп рулит!