Сделать стартовой Добавить в закладки Обратная связь Новости по RSS 2.0
ZEROlayer.ru » Уроки Photoshop » Web » Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле

Автор: sondar | Категория: Уроки Photoshop » Web | 19-09-2012, 23:23
На этом уроке мы займемся созданием в среде Photoshop впечатляющего макета портфолио, стилизованного под ретро.

Описание урока
- использованная программа: Photoshop CS 6
- примерное время на выполнение: 25-45 минут

Ресурсы урока
Изображения: Jon Reinfurt, Lorena Alvarez Gómez
Иконки: веб иконки

Прежде чем приступить к работе, предлагаю взглянуть на законченное изображение

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


Шаг 1: Создаем новый файл
Откройте Photoshop и создайте новый документ размером 1200x1800 пикселя.

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


Шаг 2: Создаем фон
Выберите инструмент Заливка (Bucket Tool) и залейте фон цветом # f5fff7.

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


Шаг 3: Создаем верхнюю панель навигации
Создайте новый слой: Слои > Новый > Слой (Layer> New>Layer) и выделите верхнюю часть при помощи инструмента “Прямоугольная область” (Rectangular Marquee Tool). При помощи инструмента Заливка (Bucket Tool) Залейте ее цветом # 08515a.

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


Шаг 4: Текст
Выбрав инструмент Текст (Text Tool), наберите логотип и пункт меню. Используйте цвет # ffffff.

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


Шаг 5: Панель поиска
Выберите инструмент Прямоугольник со Скругленными Краями (Rounded Rectangle Tool) и начертите небольшой прямоугольник в правой части холста цветом # ffffff. Далее пройдите в меню Слои > Стили слоя > Обводка… (Layer> Layer Styles> Stroke).

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


Теперь примените Внутреннюю тень (Inner Shadow).

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


Далее выберите инструмент Перо (Pen Tool) и выделите небольшую область в окне поиска. Залейте эту область цветом# ce523a. Далее пройдите в меню Слои > Стили слоя > Наложение градиента (Layer> Layer Styles> Gradient Overlay), задав цвета # ce523a и # d67965.

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


Наконец, выбрав инструмент Текст (Text Tool), наберите какой-нибудь текст.

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


Шаг 6: Добавляем ретро-линии
Создайте новый слой: Слои > Новый > Слой (Layer> New>Layer) и выберите инструмент Перо (Pen Tool), с помощью которого нужно будет начертить контур, как показано на рисунке ниже.

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


Теперь активируйте инструмент Кисть (brush tool), выберите жесткую круглую кисть размером 5 пикселей и задайте в качестве Основного цвета (foreground) - # ce523a. Теперь снова кликните по инструменту Перо и, кликнув по контуру ПКМ, выберите пункт Выполнить обводку контура (Stoke Path).

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


Теперь снова кликните по контуру ПКМ и выберите пункт Удалить контур (Delete Path). Затем пройдите в меню Слои > Стили слоя > Тень (Layer> Layer Styles > Drop Shadow).

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


Повторите процесс, создавая еще одну линию, использовав на этот раз цвет # ffffff. Либо просто продублируйте слой (CMD/Ctrl+J) и измените цвет, применив стиль слоя Наложение цвета (Color overlay). Далее просто сдвиньте линию при помощи инструмента Перемещение (Move Tool).

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


Шаг 7: Создаем Сервисы
Кликните по инструменту Прямоугольная область (Rectangular Marquee Tool) и выделите область под верхней панелью навигации. Залейте ее цветом # cf5339.

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


Выберите инструмент Многоугольник (Polygon Tool) и создайте 6-стороннюю фигуру цвета # 576894. Теперь пройдите в меню Слои > Стили слоя > Обводка… (Layer> Layer Styles> Stroke).

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


Теперь примените Тень (Drop shadow).

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


Теперь вставьте по центру конку, после чего так же примените к ней стиль слоя Тень (Drop shadow).

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


Повторите процесс создавая дополнительные фигуры, варьируя цвета и иконки.

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


Теперь выберите инструмент Текст (Text Tool) и наберите заголовок цветом # ffffff.

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


Шаг 8: Добавляем портфолио
Выберите инструмент Текст (Text Tool) и наберите заголовок цветом # 08515a, а остальное содержание цветом # 547a7f.

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


Возьмите инструмент Скругленный прямоугольник и создайте прямоугольник цветом #ffffff. Затем щелкните по Слой>Стили слоя>Обводка (Layer>Layer styles>Stroke) и добавьте обводку цветом #cf5339.

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


Теперь вставьте изображение по центру и наберите какой-нибудь текст цветами # cf5339 и # 08515a.

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


Повторите процесс, создавая дополнительные вкладки. Для каждой следующей вкладки мы использовали Обводку цвета # 08515a.

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


Шаг 9: Создания нижнего меню (footer)
Создайте новый слой и выберите инструмент Прямоугольная область (Rectangular marquee Tool). Выделите небольшую полоску и залейте ее цветом # cf5339. Затем выделите оставшуюся область и залейте ее цветом # 08515a.

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


Наберите какой-нибудь текст (инструментом Текст). Для заголовка используйте цвет # ffffff, а для остальных надписей - # 839c9f .

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


Теперь создадим небольшую панель обратной связи. Для этого выберите инструмент Прямоугольник (Rectangle tool) и начертите прямоугольник цветом # 013c42. Выполните обводку цветом # 013035.

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


Повторите процесс, создавая дополнительные поля формы. Добавьте текст (Имя, Электронный адрес, Текст сообщения) цветом # ffffff.

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


Выберите инструмент Перо и начертите небольшой треугольник в правом нижнем углу окна сообщения. Залейте его цветом # 0d4449. В конце добавьте кнопку “Отправить”.

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


Шаг 10: Создаем ретро-линии
Создайте новый слой и выберите инструмент Перо, с помощью которого нужно будет создать контур, так, как мы уже делали до этого.

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


Кликните ПКМ по контуру и выберите пункт Выполнить обводку контура (stroke path). Теперь повторите процесс, описанный в Шаге 6.

Создание в Photoshop ультра-модного макета веб-страницы в ретро-стиле


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


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

Другие новости по теме:


Просмотров: 4929 | Напечатать | Комментарии (0)

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Навигация по сайту

Новые уроки

Легкое тонирование при помощи режимов наложения
Легкое тонирование при помощи режимов наложения


Хотите поближе познакомиться с магией тонирования? Методов и техник тонирования существует великое множество, но сегодня я познакомлю вас с такой техникой, которая, за счет использования режимов наложения слоев, максимально упрощает весь процесс.

Популярные статьи

Друзья
Семейный портал
Полезная информация о недвижимости
Реклама

Мы в соц сетях

Рейтинг блогов


Главная страница | Регистрация | Добавить новость | Новое на сайте |

При перепечатке материалов с сайта ссылка на источник обязательна (кликабельная и не шифрованая).
Запрещено вносить изменения в графический материал, например, обрезание водяного знака или перекрытие его своим знаками.