Макет сайта в фотошопе — стиль темный

1

Автор verond | Рубрики Уроки фотошопа на русском | 30-08-2012


1.jpg

В этом уроке я покажу, как создать web макет в гладком, темном стиле.

Сначала создайте новый документ фотошоп с размерами 950 x 1130 рх и заполните фоновый слой черным цветом. Выберите rounded rectangle tool (прямоугольник со скругленными углами) и укажите радиус закругления 15px.

2.jpg

Растяните прямоугольник для шапки сайта, оставив равные отступы по бокам и немного сверху.

3.jpg

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

4.jpg

5.jpg

Ваш прямоугольник должен превратиться в такую картинку:

6.jpg

С левой стороны шапки добавьте название сайта и слоган, а справа поместите три элемента навигации.

7.jpg

Между пунктами навигации справа добавьте, в качестве разделителей, маленький квадрат или прямоугольник, я провел линию длинной 3 рх, выбрав инструмент line Tool (Линия). Закончив с этим, добавьте outer glow (внешнее свечение) с указанными ниже настройками:

8.jpg

У вас должно получиться что-то вроде этого:

9.jpg

Теперь сделайте выделение, как на рисунке ниже:

10.jpg

Залейте выделение белым цветом и уменьшите непрозрачность слоя до 2%. Затем под шапкой, включив rounded rectangle tool (прямоугольник со скругленными углами) с радиусом 15 рх, создайте соответствующую форму для панели навигации.

11.jpg

Добавьте для панели эти стили слоя:

12.jpg

13.jpg

14.jpg

15.jpg

Примерно так у вас должно получиться:

16.jpg

Выделите верхнюю половину панели навигации.

17.jpg

Залейте выделение белым цветом и уменьшите непрозрачность слоя до 5%. Теперь добавьте свой текст навигации и небольшие разделители между пунктами меню. Для создания разделителей проведите рядом друг с другом две линии толщиной 1 рх, выбрав для них контрастные (темный и светлый) оттенки серого цвета.

18.jpg

Для создания элемента навигации при наведенном курсоре выберите Elliptical Marquee Tool (Овальная область / Эллиптическая область) и сделайте белый круг, верхняя часть которого должна перекрыть нижнюю область активной кнопки.

19.jpg

Теперь размойте круг, перейдя в filter > blur > guassian blur (фильтр > размытие > размытие по Гауссу), с радиусом около 6-8 рх. Убавьте непрозрачность до 23% и затем удалите нижнюю часть круга вровень с панелью навигации.

20.jpg

Сейчас мы перейдем к оформлению блока главного контента. Выберите rounded rectangle tool (прямоугольник со скругленными углами) и растяните большую фигуру под вашей навигацией.

21.jpg

Не заполняйте выделение цветом, а вместо этого выберите радиальный градиент с переходом от такого #2c2d2d к черному цвету и залейте выделенную область градиентом, начиная с нижнего левого угла. Затем добавьте stroke (обводка) с параметрами, как на рисунке:

22.jpg

Сравните свой результат с рисунком ниже.

23.jpg

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

24.jpg

Стили слоя для серебристой кнопки справа внизу указаны на следующих рисунках:

25.jpg

26.jpg

27.jpg

Используя такие же стили слоя, какие мы применили к шапке, навигации и области главного контента, добавьте еще контент-блоки, создав прямоугольные формы с помощью rounded rectangle tool (прямоугольник со скругленными углами).

28.jpg

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

29.jpg

Первый из добавленных блоков я использую в качестве галереи изображений. Возьмите rounded rectangle tool (прямоугольник со скругленными углами) и создайте внутри блока еще одну прямоугольную форму, затем добавьте следующие стили слоя:

30.jpg

31.jpg

Ваша картинка должна быть похоже на эту:

32.jpg

Внутри созданной формы поместите картинку, прежде скопировав ее в буфер обмена и выбрав затем edit > paste into (редактирование > вставить). Расположите изображение в нужном месте, затем растяните черный прямоугольник на всю ширину картинки в ее нижней части и, уменьшив непрозрачность до 40%, добавьте какую-нибудь информацию о картинке.

33.jpg

В блок контента справа я добавил несколько простых новостей.

34.jpg

Третий, самый нижний блок я использую для галереи картинок с flickr. Создайте внутри скругленный прямоугольник, как мы сделали это в первом контент-блоке.

35.jpg

Теперь поместите во внутреннюю форму несколько изображений с flickr. Я закруглил углы у своих картинок, накладывая скопированное изображение на скругленный прямоугольник нужного размера и затем добавляя к нему маску слоя при выделенном прямоугольнике (Ctrl+клик по миниатюре маски фигуры в палитре слоев). После этого прямоугольник можно удалить.

36.jpg

Выбрав инструмент elliptical marquee tool (овальная область), добавьте два черных кружочка по краям галереи, расположив их посредине.

37.jpg

Внутри этих пока невзрачных кружочков просто добавьте справа и слева светящиеся стрелки.

38.jpg

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

39.jpg

40.jpg

(Исходник платный).

Добавляйте пост в свои любимые социальные сети, и Вы сможете вернуться к этой записи в любое время.


Комментарии (1)

Делал все по инструкции, но результат немного хуже чем у вас.

Написать комментарий

Spam Protection by WP-SpamFree