Photoshop для создания сайта

Мощная программа Photoshop нашла свое применение в нелегком деле веб-дизайна. В данной статье, уважаемый читатель, я изложу основы применения графического пакета Photoshop в качестве инструмента для создания сайта.

И так, что хорошего в Photoshop и зачем он нужен для создания сайта.

Здесь сразу можно найти два применения, в зависимости от того, какие именно сайты вы делаете:

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

При создании макета сайта в Photoshop необходимо учитывать будет ли сайт "резиновым" или фиксированного размера. Кстати говоря, резиновость сайта - это далеко не сама цель и в огромном количестве случаев резиновый макет хуже фиксированного по размерам. Если макет резиновый, то необходимо понимать, где именно он будет тянуться.

Важным фактором при подготовке макета является то, что сайт должен без горизонтальной прокрутки уместиться в разрешение монитора 1024*768 - это минимальное, на данный момент, разрешение 17-дюймового монитора. И если на 17-ти дюймах возникнет горизонтальная прокрутка, то у многих критиков вашего сайта случиться эпилептический припадок от счастья.

С лирическим вступлением окончено, давайте разбираться с программой.

Перво-на-перво создаем новый файл, в котором и будем рисовать наш макет сайта. Исходя из влазимости в 1024*768 ширина у созданного файла не должна превышать 1000 точек, высота может быть любой (вертикальная прокрутка нас не пугает).

Новый документ для будующего сайта

Параметр Разрешение в случае веб-дизайна не играет никакого значения, пусть он будет равен 70. А вот если вы создаете макет для последующей печати, то тут уж необходимо, чтобы Разрешение равнялось 300 пикс./дюйм.

Документ создан, начинаем рисовать. О том как рисовать в Photoshop в двух словах не расскажешь - дело это не простое. Но по данной тематике в интернете очень много полезных сайтов. Вот, например, http://www.photoshop-master.ru/. Так же есть большое количество полезной литературы (для скачки книг бесплатно пользуйтесь сайтом http://torrents.ru/ ).

В качестве вдохновения к рисованию шаблона сайта можно использовать скачанные бесплатные шаблоны (воспользуйтесь поисковиком и задайте ему запрос "бесплатные шаблоны сайта", у вас будет из чего выбрать).

Теперь остается грамотно порезать макет дизайна сайта и сохранить в грамотные форматы грамотным образом.

Картинка на градиентном или сложном фоне

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

Все это необходимо делать в том случае, если картинка, накладываемая по верх фона, можем смещаться (позиционирование картинки изменяется в зависимости от разрешения монитора). В этом случае невозможно четко состыковать фон на картинке со съезжающим сложным фоном заднего плана и будут видны стыки.

Для сохранения с прозрачным фоном нам подойдут форматы gif и png. В случае простого изображения с четкими границами наиболее оптимален формат gif. Если в изображении присутствуют градиентные цвета и размытые границы, тогда - png. Оба эти формата имеют способность сохранять прозрачный фон изображения.

Простой фон

Если фон простой (белый или одноцветный), то мы можем поставить изображение прямо поверх заданного фона, при условии что у изображения точно такой же фон, как и у подложки.

В этом случае для нас оптимален формат сохранения jpg .

Сохранять из Фотошопа нужно по комбинации клавиш Shift+Ctrl+Alt+S - это сохранение для web или устройств.

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

Дополнительные настройки сохраняемого изображения

Уменьшая показатель Качество и отслеживая изменение самого изображения в окне слева необходимо добиться минимального размера изображения (чем меньше размер, тем быстрее изображение грузиться) и удовлетворительного его внешнего вида. Оптимального сочетания, обычно, можно добиться при значении Качества равного 55.

Хочу заметить, что при сохранении простого изображения (четкие границы, отсутствие градиентных и сложных цветом) даже в случае простого фона, оптимальным по соотношению вес/качество окажется формат gif .

Как правильно вырезать

Очень часто приходится видеть следующие ошибки:

Когда нужно замостить блок градиентным цветом (блок имеет изменяемую длину и постоянную высоту) вырезают слишком длинный кусок градиентного фона. Это совершенно ни к чему. Достаточно вырезать кусочек градиента длинной в 1 пиксель и высотой, равный высоте заполняемого градиентом блока. Далее свойством background-repeat: repeat-x повторяем нашу градиентную картинку вдоль оси Х и замащиваем фоном весь, отведенный под него, блок. При этом наша 1-пиксельная картинка (формата jpg ) залетает на компьютер пользователя в мгновение ока.

Так же часто приходится видеть использование png- формата с прозрачным фоном в тех местах, где можно обойтись обычным jpg. Моя нелюбовь к формату png следует из того, что прозрачность в нем не работает корректно с IE6 и необходимо подключать дополнительные фиксы.

Интересные записи

• Как в фотошопе нарисовать круг
• Дизайн сайта в Photoshop по шагам
• Файлы к книге c для профессионалов
• Правила и рекомендации по использованию сайта
• Этикетка для мыла Урок фотошоп для начинающих
• Сделать фотографию в фотошопе онлайн - это просто