Urban Rivals RU
Меню сайта
Категории каталога
Материалы сайта
Облако тегов
Скачать шаблон DLE for ucoz Иконки made by avdey=) Скачать StroyHelp to Ucoz Кс CS шаблон Анимированная грозовая молния Скачать бесплатно шаблон для ucoz Oslik Скачать бесплатно Новый Шаблон для UcoZ (от Web-Masteru.Net.Ru) Иконки с исчезающемися надписями by AleX Реалистичный огонь Скачать иконки групп ucoz By Saneer Бесплатно Красивый шаблон для uCoz Orange icons Иконки для УкоЗ Как менять цвет глаз в Photoshop Иконки Glossy Red Icons Set Иконки для групп UCOZ Скачать бесплатно футбольный шаблон Rip By EVILAMAN - REAL Скачать шаблон на му lineage Скачать бесплатно шаблон для UCOZ тЕктоник by bannerkz Скачать Музыкальный набор кнопок Как сделать оригинальный логотип в PhotoShop? Шаблон RedIce_v3 для ucoz Космический неон Иконки скачать для сайта Скачать Шаблон JumpStyle для ucoz
Главная » Статьи » Уроки Adobe Photoshop » Для сайта

Рисуем дизайн сайта в Photoshop
Рисуем сайт
Оригинально, ярко. Придется попотеть, но это портфолио)) Портфолио должно удивлять)

Создайте новый файл, размером 766 х 699 px и 72 dpi.
Инструментом Rectangle Tool (U), делаем выделение, как на рисунке:

Рисуем сайт

Применяем следующие параметры: (Blending Options>Gradient Overlay)

Рисуем сайт

Рисуем сайт

Рисуем сайт

Создайте новый документ 4*4 px и 72 dpi. Выберите инструмент Карандаш, основной цвет - белый. Создаем изображение, как на рисунке, после чего Edit>Define Pattern.

Рисуем сайт

Рисуем сайт

Вверху страницы, рисуем инструментом - Rectangle Tool (U), полосу:

Рисуем сайт

Рисуем сайт

Параметры слоя: Fill 0%, Blending Options-Pattern Overlay:

Рисуем сайт

Рисуем сайт

Выше нарисованной полосы, инструментом - Rectangle Tool (U), рисуем полосу и закрашываем цветом - #BBDD03:

Рисуем сайт

Рисуем сайт

Создаем копию полосы (белые точки), используя - Free Transform переверните копию полосы в основание фона:

Рисуем сайт

Создайте новый документ 4*4 px и 72 dpi. Выберите инструмент Карандаш, основной цвет - #729C06. Создаем изображение, как на рисунке, после чего Edit>Define Pattern.

Рисуем сайт

Рисуем сайт

Ниже нарисованной полосы, инструментом - Rectangle Tool (U), рисуем полосу:

Рисуем сайт

Рисуем сайт

Fill 0%, Blending Options-Pattern Overlay:

Рисуем сайт

Рисуем сайт

Инструментом Pen Tool (P), рисуем украшения фона, цвет - #AAD500:

Рисуем сайт

Другой рисунок, цвет - #AAD700

Рисуем сайт

Цвет - #AECD01

Рисуем сайт

Рисуем сайт

Создайте новый документ 4*4 px и 72 dpi. Выберите инструмент Карандаш, основной цвет - #E3E3E3. Создаем изображение, как на рисунке, после чего Edit>Define Pattern.

Рисуем сайт

Инструментом Rounded Rectangle Tool (U), рисуем:

Рисуем сайт

Рисуем сайт

Blending Options>Drop Shadow

Рисуем сайт

Blending Options>Pattern Overlay

Рисуем сайт

Рисуем сайт

Сделайте две копии последнего сделанного слоя и копируйте их, как показано на рисунке:

Рисуем сайт

Вставьте картинки:

Рисуем сайт

Rounded Rectangle Tool (U), цвет - #EBEBEB, настройки:

Рисуем сайт

Рисуем сайт

Копируем последний слой, свободная трансформация, уменьшаем размер, цвет - #49BD14

Рисуем сайт

Blending Options>Stroke

Рисуем сайт

Рисуем сайт

Инструментом - Rectangle Tool (U) делаем выделение, как на рисунке:

Рисуем сайт

Зажав Alt нажимаем мышкой между двумя последними слоями. Fill 50%.

Рисуем сайт

Рисуем сайт

Для заключительного результата, мы объединяем слои с иконками, и копируем их 2 раза. После чего перемещаем иконки на 2 оставшиеся картинке, после чего меняем их цвета. Первая копия - #ED9300; вторая копия - #5EA9D1. Blending Options>Stroke, как показано выше.

Рисуем сайт

Пишем номера в иконки, после чего Free Transform, поворачиваем их:

Рисуем сайт

Рисуем сайт

Blending Options>Drop Shadow

Рисуем сайт

Рисуем сайт

Напишите название сайта:

Рисуем сайт

Рисуем сайт

Blending Options>Drop Shadow

Рисуем сайт

Рисуем сайт

Новый слой. Точки, цвет - #D7FF00:

Рисуем сайт

Создайте таблицы, и подпишите карточки:

Рисуем сайт

About us, О нас

Рисуем сайт

Рисуем сайт

Создаем меню:

Рисуем сайт

Рисуем сайт

Инструмент карандаш, рисуем точки:

Рисуем сайт

Рисуем сайт

Копируем слой с разделительной полосой:

Рисуем сайт

Полосы должны иметь следующие настройки. Blending Options>Outer Glow

Рисуем сайт

Рисуем сайт

Rounded Rectangle Tool (U), настройки:

Рисуем сайт

Рисуем сайт

Blending Options>Drop Shadow

Рисуем сайт

Рисуем сайт

Копия слоя. Инструментом свободная трансформация, уменьшаем, цвет - #6DD800

Рисуем сайт

Blending Options>Stroke

Рисуем сайт

Rectangle Tool (U), рисуем как на рисунке, цвет - #A9DB7C

Рисуем сайт

Удерживая ALT, жмем мышкой между последними слоями:

Рисуем сайт

Рисуем сайт

Тоже самое делаем, для двух остальных картинок. Меняем только цвет: вторая кнопка #F6C073; третья - #89B4C7 (Blending Options>Stroke как выше):

Рисуем сайт

Пишем название кнопок:

Рисуем сайт

Рисуем сайт

Blending Options>Drop Shadow

Рисуем сайт

Рисуем сайт

Rectangle Tool (U) рисуем белые квадраты:

Рисуем сайт

Blending Options>Drop Shadow

Рисуем сайт

Рисуем сайт

Вставляем картинки в квадраты:

Рисуем сайт

Rectangle Tool (U), рисуем двойную линию, левая сторона должна быть зеленая, правая - белая:

Рисуем сайт

Параметры для левой полосы: Fill 0%, Blending Options>Pattern Overlay

Рисуем сайт

Параметры для правой полосы: Opacity 70%, Fill 0%, Blending Options>Pattern Overlay

Рисуем сайт

Рисуем сайт

Рисуем сайт

Копируем слой с полосой и перемещаем ее на другой край:

Рисуем сайт

Напишите необходимый текст (ниже настройки для различных текстов):

Рисуем сайт

Рисуем сайт

Рисуем сайт

Рисуем сайт

Навигационный текст:

Рисуем сайт

Цифровой:

Рисуем сайт

Рисуем сайт

Ellipse Tool (U), рисуем круг, цвет - #FFD40F

Рисуем сайт

Blending Options>Drop Shadow

Рисуем сайт

Blending Options>Stroke

Рисуем сайт

Рисуем сайт

Итог:

Рисуем сайт




Автор: Adobe Tutorialz
Перевод: Tin231

взято с demiart.ru

Категория: Для сайта | Добавил: cinemania (28.12.2008)
Просмотров: 2349 | Рейтинг: 0.0/0 | |Теги:
Пожалуйста! Если вам понравился этот материал напишите свой отзыв. Посетите наш ФОРУМ


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма Входа
Четверг, 21.11.2024, 16:51
-й день

Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или авторизуйтесь!
 
Друзья сайта
Статистика
Рейтинг сайтов
Онлайн всего: 2
Гостей: 2
Пользователей: 0

Лучшие фильмы | Уроки Adobe Photoshop | Шаблоны для uCoz | Онлайн-TV | Кнопки для сайта UCOZ | Иконки для сайтов UCOZ | Скрипты для uCoz