Urban Rivals RU
Меню сайта
Категории каталога
Материалы сайта
Облако тегов
Огненные иконки для форума UCOZ Скачать шаблон для Блога Скачать кисти для фотошопа с изображениями природы, леса... Скачать новый шаблон игровых серверов! Кнопки для форума ucoz Скачать кнопки для форума ucoz Замерзшее окно в PHOTOSHOP Скачать бесплатно шаблон для укоз Rip By lera Скачать бесплатно шаблон для ucoz на тему футбол Barca Скачать CS шаблон Шаблон для игры Burnout Paradise КС шаблон Скачать Отличный шаблон для КС сайта шаблон для сайта "зеленый" Crfxfnm valve portal shablon Скачать шаблон DLE for ucoz icons for ucoz Скачать Шаблон JumpStyle для ucoz шаблон для сайта "Qwarez" Как менять цвет глаз в Photoshop эффект ePlastic Иконки групп для uCoz Шаблон для ucoz Lineage2-X Website Скачать шаблон для сайта на тему игры (for uCoz) Скачать иконки групп ucoz By Saneer
Главная » Статьи » Уроки 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)
Просмотров: 1552 | Рейтинг: 0.0/0 | |Теги:
Пожалуйста! Если вам понравился этот материал напишите свой отзыв. Посетите наш ФОРУМ


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

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

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