Хостинговый сайт

Конечный результат:


Хостинговый сайт


Настройка фона
Создайте новый документ размером 1200х1200 пикселей, установите цвет заливки — #3e3e3e и цвет фона — #191919. Выберите инструмент Градиент (Gradient Tool) и настройте так:


Хостинговый сайт


Сделайте заливку градиентом, начиная из центра холста вниз наполовину. Потом примените фильтр Добавить шум (Add Noise Filter):


Хостинговый сайт

Хостинговый сайт


Заголовок сайта
Выберите инструмент Горизонтальный текст (Horizontal Type Tool) и напишите заголовок вашего сайта, используя шрифт “Verdana” размером 36pt.


Хостинговый сайт


Перейдите в меню Стилей слоя (Layer Style — Blending Options) и настройте так:

Отбрасывание тени (Режим – Умножение):


Хостинговый сайт


Внутренняя тень (Режим – Нормальный):


Хостинговый сайт


Наложение градиента (Режим – Нормальный, Стиль – Линейный):


Хостинговый сайт


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):


Хостинговый сайт

Хостинговый сайт


Навигационное меню
Выберите инструмент Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) и установите его радиус – 15 пикселей.


Хостинговый сайт


В новом слое создайте фигуру справа от заголовка сайта:


Хостинговый сайт


Выберите инструмент Перо (Pen Tool) и кликните правой кнопкой внутри контура и выберите Выполнить заливку контура (Fill Path):


Хостинговый сайт


Потом кликните правой кнопкой на контуре ещё раз и выберите Удалить контур (Delete Path). Затем примените следующие стили слоя:

Отбрасывание тени (Режим – Умножение):


Хостинговый сайт


Тиснение (Стиль – Внутренний скос, Метод – Жёсткая огранка, Режим подсветки – Осветление, Режим тени – Умножение):


Хостинговый сайт


Наложение градиента (Режим – Нормальный, Стиль – Линейный):


Хостинговый сайт


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):


Хостинговый сайт

Хостинговый сайт


Таким же способом создайте белую фигуру (но не нужно применять стили слоя):


Хостинговый сайт


Установите Непрозрачность этого слоя – 8% и напишите разделы меню:


Хостинговый сайт


Между каждым разделом создайте круглое выделение инструментом Овальная область (Elliptical Marquee Tool):


Хостинговый сайт


Залейте выделение цветом #00688f и примените стиль Отбрасывание тени (Layer Style — Drop Shadow):


Хостинговый сайт

Хостинговый сайт


Область контента
Под заголовком и навигационным меню напишите привлекающее предложение и на правой стороне под ним создайте прямоугольник в новом слое, используя инструмент Прямоугольная область (Rectangular Marquee Tool):


Хостинговый сайт


К слою с прямоугольником примените стиль Наложение градиента (Layer Style — Gradient Overlay):

Режим – Нормальный, Стиль – Линейный


Хостинговый сайт


Внутри этого прямоугольника напишите текст. Используйте цвет #373737 для заголовков и размер 14pt, для текста используйте цвет #898989 и размер 12pt. Также вставьте иконки из этого набора.


Хостинговый сайт


Сайдбар
Сделайте копию слоя с прямоугольником контента и поместите её под оригинал. Инструментом Свободное трансформирование (Free Transform) сожмите прямоугольник и поместите его, как показано ниже:


Хостинговый сайт


В режиме Перспективы (Transform – Perspective) потяните левую верхнюю точку вниз, удерживая Shift.


Хостинговый сайт


Используйте такие настройки стиля Наложение градиента (Layer Style — Gradient Overlay) для маленького прямоугольника:


Хостинговый сайт


Сделайте ещё одну копию слоя с прямоугольником контента, уменьшите её и расположите, как показано ниже:


Хостинговый сайт


На стыках прямоугольников создайте разделители разных цветов. Эти лини должны быть на всю высоту прямоугольников.


Хостинговый сайт

Хостинговый сайт


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


Хостинговый сайт


Между пунктами нужно создать разделители. Это можно сделать при помощи текстового инструмента (создайте точки).


Хостинговый сайт


Под текстом создайте кнопку. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 15 пикселей создайте фигуру любого цвета. Скопируйте стили слоя с голубой навигационной панелью на этот прямоугольник и получите кнопку. Потом допишите “Learn More”.


Хостинговый сайт


Повторите эти шаги чтобы создать ещё две части контента:


Хостинговый сайт

Хостинговый сайт


В конце разделите их, используя линии:


Хостинговый сайт


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


Хостинговый сайт





Делаем Web-дизайн

Вас может также заинтересовать:

16 ноября 2018

Все большим разнообразием радуют сегодняшнего потребителя производители DVD-плееров. Одним из интересных, но малораспространенных сегментов этого рынка остаются переносные DVD-плееры. Китайская компания ВВК активно продвигает и выпускает не только стационарные, но и портативные плееры по невысоким ценам. Одну из последних разработок компании - BBK DL333S - мы рассмотрим сегодня.

16 ноября 2018

Компактная, элегантная и простая в управлении камера начального уровня с превосходными техническими характеристиками. Матрица 16 Мпикс., 5-кратный широкоугольный зум-объектив (от 28 мм в 35-мм экв.), оптический стабилизатор, ЖК-дисплей 3”, технология приоритета лица, интеллектуальный автоматический режим с автовыбором сюжетной программы (из 32), HD-видеосъемка.

16 ноября 2018

Когда 3 года назад компания Panasonic представила Lumix G1 — первую в мире компактную камеру со сменной оптикой, оценить перспективность новинки могли в основном специалисты фотоиндустрии. Любителям камера в то время казалась игрушкой для богатых фотографов.