Сайт-портфолио для фотографа

[web-design]

Photography portfolio

"Потрясающий дизайн для сайта-портфолио фотографа со множеством информационных блоков и привлекательным видом"
Окончательный результат:

Рисуем

Создаем новый файл(File>New) с размерами 800x800 px. Выберите Paint Bucket Tool (G), установите следующий цвет: #111111, затем залейте Ваш холст.



Используем Rounded Rectangle Tool (U) с радиусом 7px для создания кнопок меню, расположенного в заголовке. Это будет главный слой.



Blending Options(2 раза нажмите по иконке слоя)>Gradient Overlay



Параметры градиента:



Blending Options>Stroke







Используя тот же инструмент(Rounded Rectangle Tool) создаем блик на кнопке. Для этого создаем еще один прямоугольник(на рисунке - верхний), затем жмем Subtract from shape area (-) в настройках инструмента и рисуем еще один прямоугольник(на рисунке - нижний). Вот так:



Параметр слоя: Fill 0%
Blending Options>Gradient Overlay



Параметры градиента:





Используя тот же инструмент с тем же радиусом(цвет устанавливаем на белый - #ffffff), рисуем индикатор кнопки, а затем, зажав Alt и выбрав Rectangle Tool (U), удаляем ненужный участок:



Параметр слоя: Fill 20%



Теперь объедим все слои(кроме background) в группу: зажав Ctrl выделяем нужные слои, после жмем правой кнопкой и выбираем Create a new group(или Group into new smart object - видимо, зависит от версии фотошопа huh.gif ). Копируем получившийся слой и изменяем параметры:

1) главный слой: Blending Options>Gradient Overlay



Параметры градиента:



Blending Options>Stroke



2) параметр блика: Fill 0%
Blending Options>Gradient Overlay



Параметры градиента:



3) параметр индикатора кнопки: Fill 10%



Копируем слой 3 раза и размещаем так, как показано на рисунке:



Используем Rounded Rectangle Tool (U) с радиусом 7px для изображения панели с логотипом и функцией поиска:



Параметры слоя: Blending Options>Gradient Overlay





Blending Options>Stroke





Берем Pencil Tool ((1 px), поставив белый цвет, и рисуем иконки для кнопок:







Примечание переводчика: автор, видимо, считает, что вы хорошо владеете карандашом... Но никто не мешает взять иконки, поискав их в гугле!!

Теперь добавим надписей для кнопок:





Параметр слоя(Home page): Blending Options>Stroke



Параметр других слоев (About me, Services, Gallery, Contact me): Blending Options>Stroke





Выбираем Rounded Rectangle Tool (U) (radius 7 px) и рисуем лого. Ненужный участок удаляем с помощью Rectangle Tool (U), зажав Alt:



Параметр слоя: Fill 0%
Blending Options>Gradient Overlay





Blending Options>Stroke





Теперь добавим надпись в логотип:
(PHOTO)



(PORTFOLIO)





Создаем блик для логотипа: Create new layer. Выделяем участок слоя с помощью Rectangular Marquee Tool (M). Выбираем Brush Tool (cool.gif, Opacity of 50% - закрашиваем выделенный участок:







Параметр слоя: Fill 30%



Используем Rounded Rectangle Tool (U) (radius 7 px) для прорисовки функции поиска. Ненужный участок удаляем с помощью Rectangle Tool (U), зажав Alt:



Параметр слоя: Blending Options>Gradient Overlay





Blending Options>Stroke





Теперь создадим кнопки:





Используя Pencil Tool ( B ) (1 px) и цвет #FF9E00, рисуем стрелочки к кнопкам:



Rectangle Tool (U) поможет нам нарисовать поле для текста(цвет #2D2D2D):



Параметр слоя: Blending Options>Stroke





Вставим слово Search в это поле:





Кнопку начала поиска нарисуем с помощью Rounded Rectangle Tool (U) (radius 3 px). Цвет #CC6600:



Параметр слоя: Blending Options>Stroke





Вставим текст:







Теперь выпьем чашечку кофе... Шапка создана!!!

Теперь необходимо создать поле для фотографий из портфолио. Используем Rounded Rectangle Tool (U) (radius 7 px), цвет #111111.



Параметр слоя: Blending Options>Inner Glow



Blending Options>Stroke





Используя тот же инструмент, рисуем еще один слой:



Параметр слоя: Blending Options>Inner Glow



Blending Options>Stroke





Скопируем получившийся слой несколько раз и разместим их на странице:



Выбираем красивые фотографии, добавляем в наш документ, предварительно подогнав под нужные размеры. Помещаем каждую фотку над слоем, где она будет размещаться(это действие выполняется на панели Layers). Зажав Alt, кликаем мышью(левой кнопкой) между слоем с фотографией и слоем, гда она будет располагаться(итак для всех фото):



Используем Rectangle Tool (U) для создания специального блока(цвет - #000000)



параметр слоя: Fill 30%



Вставляем текст в этот блок:





Параметр слоя: Blending Options>Stroke





Используя Rounded Rectangle Tool (U) (radius 7 px), создаем еще один блок(цвет #333333):





Следующий наш шаг: Rounded Rectangle Tool (U) (radius 7 px) - рисуем еще один блок(цвет #939393):



Параметр слоя: Blending Options>Inner Glow



Blending Options>Stroke





Добавим фото для этой панели так, как мы это делали раньше:



Добавим текст:
(WELCOME)



(TO MY WEB SITE)



(выделенный текст)



(обычный текст)





Добавим ссылки:





Создадим новый слой и, используя Pencil Tool (1px), нарисуем стрелки к ссылкам:



Находим в интернете изображение фотоаппарата и вставляем его:



Копируем этот слой с фотоаппаратом и с помощью Free Transform делаем так:



Жмем Q(Edit in Quick Mask Mode), выбираем Gradient Tool (G)(цвет черный) и проводим вертикальную линию от фотоаппарата вниз, жмем еще раз Q и удаляем получившееся выделение. В итоге получаем:



В нижней части сайта расположим меню:





Используя Pencil Tool (1 px)(цвет - белый) рисуем вертикальные линии:





Все!!! Наслаждаемся полученным результатом!!!


Автор: Adobetutorialz
Перевод: Bioshock
Источник

@темы: Уроки, Web-дизайн