Симпатичный дизайн для сайта


Симпатичный дизайн для сайта


Открываем Фотошоп, Нажимаем Ctrl + N и в открывшемся окне создания нового документа вписываем ширину и высоту 850px. Обратимся к Многоугольному лассо (Polygonal Lasso) и с его помощью создадим такое выделение:

Симпатичный дизайн для сайта


Создаем новый слой и, находясь на нем, выполняем заливку текущего выделения (инструмент Заливка, Paint Bucket, на клавиатуре G) белым цветом. Далее нужно открыть палитру каналов и щелкнуть по пиктограмме, обведенной на скриншоте, таким образом, в отдельном канале сохранив выделение.

Симпатичный дизайн для сайта


В списке каналов выбираем Alpha1 и изба

вляемся от выделения с помощью команды Ctrl + D, после чего применяем фильтр Gaussian Blur (Размытие по гауссу), значение которого должно быть 10px.

Симпатичный дизайн для сайта


Открываем Уровни (Levels, Ctrl + L на клавиатуре) и, как это видно на скриншоте, устанавливаем все ползунки по центру гистограммы, в результате чего границы фигуры станут более четкими и скругленными.

Симпатичный дизайн для сайта


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

Симпатичный дизайн для сайта


Тень (Drop Shaddow): режим наложения – Умножение;

Симпатичный дизайн для сайта


Внутреннее свечение (Inner Glow): Метод – Плавный;

Симпатичный дизайн для сайта


Наложение градиента (Gradient Overlay): Стиль –Линейный;

Симпатичный дизайн для сайта


Обводка (Stroke): Положение внешнее (Outside), Цвет обводки – см. скриншот.

Симпатичный дизайн для сайта


После настройки стилей помещаем данную фигуру в верхнюю часть документаа в верхней половине этого слоя создаем белый прямоугольник и растягиваем его на всю ширину. Непрозрачность его должна быть 10%.

Симпатичный дизайн для сайта


Симпатичный дизайн для сайта


Создадим разделители для меню. Воспользуемся инструментом Линия (Line Tool) и нарисуем две линии шириной 1px, должна иметь цвет #232323, вторая - #383838, после чего пристыковываем их друг к другу. Так как впоследствии они буду использоваться как одно целое, можно объединить их в группу. Теперь можно скопировать разделитель и разместить его по навигационной панели (количество на ваше усмотрение).

Симпатичный дизайн для сайта


Заполняем шапку ссылками в панели навигации, слоганом и логотипом. Для разделов навигации в уроке использовался цвет шрифта #1a88e4.

Симпатичный дизайн для сайта


Далее берем из инструментальной панели Овальную область (Elliptical Marquee) и рисуем две окружности с цветом заливки #1a88e (диаметр подбирайте на свой вкус). Данные круги должны располагаться под слоем с навигацией. Поместите их в места, показанные на скриншоте, и примените к ним фильтр Размытие по гауссу (Gaussian Blur), значение радиуса размытия – 2px.

Симпатичный дизайн для сайта


Симпатичный дизайн для сайта


Создаем новый слой, а в нем – вот такое выделение, которое заливаем синим цветом, по аналогии с окружностями, описанными выше. К этой фигуре также применяем размытие, однако, значение должно быть 15px. К текущему слою добавляем маску слоя и заливаем ее градиентом линейного типа, чтобы понизить яркость заливки к краю. Теперь уменьшаем непрозрачность до нужного значения и копируем полученный световой луч на противоположную сторону.

Симпатичный дизайн для сайта


Под ссылками в главном меню инструментом Линия (Line Tool) рисуем горизонтальные линии с цветом #1a88e4.

Симпатичный дизайн для сайта


Дошла очередь до контента. Под шапкой с помощью закругленного прямоугольника создаем фигуру с радиусом закругления 10px, ширину и высоту подберите примерно как на скриншоте.

Симпатичный дизайн для сайта


Дважды щелкаем по слою в палитре слоев и в открывшемся окне редактируем эффекты стилей следующим образом.

Симпатичный дизайн для сайта


Градиент (Gradient Overlay): все значения оставляем нетронутыми кроме цветов градиента.

Симпатичный дизайн для сайта


Обводка (Stroke): ПоложеиеВнешнее (Outside), Стиль Зеркальный, Тип Градиент, Режим Нормальный.

Симпатичный дизайн для сайта


В левую часть прямоугольника вставляем логотип сайта, а в правую – текст. Стрелка перед заголовком «About Us» взята из стандартного набора, как и стрелка после выражения «more info». А светящаяся линия в верхнем правом углу сделана при помощи инструмента Прямоугольник.

Симпатичный дизайн для сайта


Для всех объектов, имеющих свечение, нужно настроить Внешнее свечение (Layer Style -> Outer Glow) так:

Симпатичный дизайн для сайта


Под прямоугольником, созданным только что, рисуем еще два с такими же параметрами и стилями (за исключением ширины и высоты).

Симпатичный дизайн для сайта


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

Симпатичный дизайн для сайта


Спускаемся в подвал. Для создания нижней части сайта воспользуемся уже готовой верхней фигурой из навигационной панели. Скопируем ее и отразим по вертикали, после чего с помощью инструмента Перемещение (Moove Tool, V на клавиатуре) разместим внизу документа. Все ссылки удаляем, нам понадобятся только Контакты (Contact Me) и Наверх (Top). Можно добавить текст о праве использования материала.

Симпатичный дизайн для сайта


Макет страницы в футуристическом стиле готов.

Симпатичный дизайн для сайта


Источник: hv-designs.co.uk
Переведено специально для 8ART.RU


  • 29 августа 2012 17:59
  • Комментов: 0
  • Goha
  • Группа: Гости

на самом деле красиво, казалось бы не так уж и много деталей, но как же всё это красивенько выглядит в целом...
  • 29 августа 2012 19:08
  • Комментов: 0

Хорошая статья, с правильной постановкой дизайна для сайта. Очень хорошо все разъясняется, да и пример очень хороший.
  • 29 августа 2012 20:22
  • Комментов: 0

Ищу новую разработку для своего сайта,а тут такая статья прекрасная.Очень популярно рассказано ребенок и тот разобрался бы.
  • 3 сентября 2012 17:34
  • Комментов: 0

А я 3 часа потратил на метод тика, когда пытался сделать дизайн своего ресурса, потом нашел эту статью - пол часа и все готово. Фотошоп сила.
Информация
Комментировать статьи на нашем сайте возможно только в течении 10 дней со дня публикации.