Главная » Статьи » Веб-дизайн

Создание гранжевого сайта для фотографа в Фотошопе


В этом уроке мы попытаемся создать дизайн сайта для фотографа. Для его создания нам потребуются некоторые векторные формы, которые вы сможете скачать ниже. В результате при помощи данных форм мы попробуем создать милый сайт-портфолио для фотографа. И так начинаем.
Для начала как всегда создаем новый проект, я обычно использую размер 960 x900 пикселей, но вы можете использовать свой любой. Для создания дизайна нам как я уже говорил понадобятся векторные растительные формы, а также гранжевая текстура. Также пригодятся готовые листочки бумаги с загнутыми краями
Для начала берем инструмент градиента (Gradient Tool ) и заливаем слой градиентом от цвета #еее4се к цвету #e0cfa5



Теперь используем текстуру которую скачали ранее. добавляем текстуру к проекту, помещаем ее в отдельный слой. Меняем режим смешивания слоев (the blending mode) на Luminosity, также при желании уменьшаем непрозрачность слоя (opacity) до 20%



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



Рисуем верхнюю панель нашего сайта при помощи Rounded Rectangle Tool ()



Добавляем тень, для этого автор предлагает создать еще одну такую же форму, но уже черного цвета и сдвинуть ее немного вниз, можно также добавить тень при помощи стилей слоя



Теперь если вы использовали первый вариант добавления тени, то уменьшаем ее непрозрачность до 20%, если второй вариант то также уменьшаем во время добавления. После этого при помощи Horizontal Type Tool создаем надпись (автор использовал шрифт: Bradley Hand ITC)



Открываем скачанные ранее векторные формы в фотошоп и выбираем крайние формы, которые указаны на картинке ниже



При помощи Rectangular Marquee Tool () создаем выделение вокруг цветка и жмем CTRL+J для дублирования выделения на новый слой, после чего размещаем цветочки подобно картинке ниже



Выбираем слой с векторами в нашей палитре слоев и жмем CTRL+ E для их слияния, после чего идем последующему пути:



Теперь мы можем видеть как наши векторные формы выделились по контуру



Берем кисть  и при помощи различных цветов раскрашиваем наше выделение, автор использовал мягкую кисть



Жмем CTRL + D для снятия выделения, и вставляем поверх наших векторных завитушек фото фотоаппарата, взятое со стока



Слева создаем строку заголовка и пишем в ней некоторый текст, ниже при помощи квадратного выделения создаем белые прямоугольники, которые позже станут фотоснимками



При помощи того же выделения, но чуть меньше по размеру рисуем черные квадраты, это будет имитация снимков полароида



В эти фотоснимки вы можете вставить ставить любые свои фото. Ниже добавляем немного текста и те же завитушки которые раскрашивали ранее, несколькими шагами выше



При помощи прямоугольного выделения создаем некое продолжение завитушки, эта линия будет являться самой нижний линией которая как бы подчеркивает наш дизайн



В итоге наше финальное изображение сайта выглядит следующим образом:

Категория: Веб-дизайн | (04.10.2010)
Просмотров: 613 | Рейтинг: 0.0/0
Всего комментариев: 0