Создание сайта
Регистрация
Продвижение
Монетизация
Облако тегов

Требуется для просмотраFlash Player 9 или выше.

Показать все теги

Главная » Создание сайта » Photoshop » Дизайн продающего сайта в стиле Web 2.0

Дизайн продающего сайта в стиле Web 2.0
Раздел: Создание сайта » Photoshop  
12 августа 2009   |   автор: admin Оставить комментарий



Начнем с создания нового документа размером 760x770 пикселей, фон прозрачный.

Выберите цвет #e8e8e8. Затем используя инструмент Paint Bucket, залейте слой этим цветом.

После этого создаем новый слой (Ctrl+Shift+Alt+N).

Воспользуйтесь инструментом Gradient, и выберите следующий вариант: Foreground to Transparent.


alt

После чего проведите линию градиента от основания до вершины слоя.

Вы получите плавный переход.

Дизайн продающего сайта в стиле Web 2.0
 
 

Возьмите инструмент Rounded rectangle Tool и измените радиус на 7 пикселей.

alt

Затем с его помощью создайте несколько фигур, как показано ниже.
 
Дизайн продающего сайта в стиле Web 2.0


Берем инструмент Ellipse и создаем с его помощью 4 фигуры.

Дизайн продающего сайта в стиле Web 2.0
 


К этим 4 фигурам применяем следующие стили (layer styles).


alt
 
 
alt
 
 
alt
 
 
alt
 
 
alt
 


 
Вот, что вы должны получить в результате.

Дизайн продающего сайта в стиле Web 2.0


Таким образом, мы придали нашим кнопкам металлический блеск.

Теперь создадим еще 4 круглые формы и поместим их над нашими кнопками, как показано ниже.

alt
 


Применим к ним следующие стили.

 
alt
 
 
alt
 
 
alt
 
 
alt
  
 
 
alt 


 Ну вот и наши кнопки.

Дизайн продающего сайта в стиле Web 2.0
 


Теперь выберите все круглые формы и продублируйте их. Самый простой способ сделать это – перетащить их на кнопку создания нового слоя (create a new layer), которая находится внизу навигационного окна.

alt 


Результат дублирования должен выглядеть следующим образом.

Дизайн продающего сайта в стиле Web 2.0


Как видите все продублированные слои уже выделены. Если у вас также, то нажмите сочетание клавиш Ctrl+E.

alt 


Теперь проследуйте Edit > Transform > Flip Vertical. Переместите выделенное, как показано ниже.


Дизайн продающего сайта в стиле Web 2.0
 


Сейчас мы сделаем отражение наших кнопок. Существует множество техник, как это можно сделать, мы используем простейшую из них. Это делается с помощью инструмента Brush (Кисть). Причем она должна быть круглая и мягкая (round / smooth brush).

alt 


Удалим нижнюю часть отражения.

Дизайн продающего сайта в стиле Web 2.0
 


Вы также можете уменьшить прозрачность слоя (Opacity) или удалить больше с помощью инструмента Eraser (Ластик).

Дизайн продающего сайта в стиле Web 2.0
 


Теперь давайте добавим изображения для наших кнопок.

Дизайн продающего сайта в стиле Web 2.0
 


Переходим к верхнему меню. Создадим новые формы другого цвета и расположим их, как на рисунке ниже, поверх и чуть выше наших черных прямоугольников.

Дизайн продающего сайта в стиле Web 2.0
 


Добавим текст и небольшой логотип.

Дизайн продающего сайта в стиле Web 2.0
 


Присмотревшись внимательно вы увидите, что слово "Solutions" имеет белый цвет. Прямо под ним нарисуем новый черный прямоугольник.

Дизайн продающего сайта в стиле Web 2.0
 


Сделай правый клик мыши над слоем прямоугольника и выберите пункт Rasterize layer.

alt 


С помощью инструмента Rectangular marquee сделаем следующее выделение.

alt 


Убедитесь, что вы выбрали именно черную фигуру, затем нажмите клавишу Delete на клавиатуре.

alt 


Сейчас нам необходимо добавить текст. Это простая задача. Мы не станем разбирать все шаги. Просто используйте инструмент Type.


Дизайн продающего сайта в стиле Web 2.0
 
 


Обратите особое внимание на 2 изображение с рекламируемым продуктом.

Их цвет значительно отличается от цвета остальных элементов сайта. Это означает, что клиент, который попадет к вам на сайт, в первую очередь обратит свое внимание именно на эти контрастирующие изображения. Что в свою очередь приведет к увеличению эффекта от данной рекламы и росту продаж.

Для привлечения дополнительного внимания добавим еще один элемент. Для этого воспользуемся инструментом Polygon со следующими настройками:

alt 


Поместим эту фигуру над нашими рекламными картинками.

alt 


Вы можете изменить ее цвет по своему усмотрению.

В итоге у вас должно получиться нечто подобное.

Дизайн продающего сайта в стиле Web 2.0
 



Источник: www.talk-mania.com

Перевод: www.web-lesson.ru

 

Ключевые теги: Photoshop, Web 2.0
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
web-lesson.ru
Добавление комментария
Ваше Имя:
Ваш E-Mail:
Код:
Введите код