Как сделать коллаж в Фотошопе и зачем это веб-мастеру?

Веб-дизайн – обширная сфера деятельности, при погружении в которую можно столкнуться с непредсказуемыми вопросами. Кому придет в голову, что с сайтостроением как-то связны горячие клавиши Photoshop или классические правила композиции и колористики? Тем не менее…

Обывательское мнение часто приравнивает веб-дизайн только к процессу создания и наполнения страниц сайта. На самом деле, в первую очередь, это именно дизайнерская работа, ведь прежде чем появится готовый веб-ресурс, надо определиться с тем, каким он будет. Всем известно, что цветовая гамма, гарнитура шрифтов и оформление текста, художественные элементы, изображения и композиция всего перечисленного как минимум на 50% определяют первое впечатление от сайта. Если он не нравится визуально, не задерживает внимание посетителя, тот вряд ли заинтересуется и содержанием. Поэтому выход тут лишь один – продумывать дизайн каждой страницы заранее.

В большинстве случаев дизайн сайта прорабатывается в каком-либо классическом редакторе изображений, таком как Photoshop или GIMP.  Самый простой вариант – просто нарисовать будущую страницу в нужном разрешении (в веб-дизайне обычно используется 96 или 108 dpi) и размере (800×600, 1024×768 или любое другое, в зависимости от идеи разработчика).

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

Итак, как же сделать дизайн для будущего сайта?

1. Создать изображение нужного размера и разрешения. Можно создать файл со стандартными настройками программы, при сохранении для WEB тот же Photoshop автоматически меняет разрешение, но размер файла может при этом «поплыть». Поэтому лучше сразу делать файл с разрешением 108 или 96 dpi, как у большинства стандартных мониторов. Аналогично с размером эскиза: исходя из того, что странички будут отображаться на мониторе, лучше задать минимальный стандартный размер, например 1024×768 пикселов, поскольку современные браузеры умеют масштабировать странички под размер монитора. Исключение – страницы, где фоном служит монолитное изображение.
2. Фон. Фотошоп располагает массой вариантов заливки – сплошные, текстурные и градиентные, заливка изображением и т.д. Главное помнить, что для использования на готовой странице лучше вырезать минимальный «паттерн»  — повторяющуюся часть узора. Это можно сделать с помощью инструмента «Выделение»; для текстурных заливок подойдет вариант «прямоугольная область», а для градиентных – «Вертикальная линия» или «Горизонтальная линия»
3. Рамки, линии, кнопки, меню – все это также можно нарисовать заранее и в едином стиле, расположив в нужном месте на эскизе.
4. Шапка сайта: обычно делается в виде коллажа, а затем разрезается на мелкие изображения, располагающиеся по отдельности  в структурных блоках страницы. В браузере границ не будет видно – видимость цельного изображения.

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

(Пока нет оценок)

Загрузка...