Urban Rivals RU
Меню сайта
Категории каталога
Материалы сайта
Облако тегов
Шаблон для КС сайта Шаблон для сайта на тему Counter Strike Скачать набор кистей для PhotoShop с эффектами царапин на фотоплёнке... Шаблон для укоз Скачать шаблон для ucoz БЕСПЛАТНО Как работать с PCD-формат. Иконки групп для форума "by DRaGoN" Кнопки для форума MegaSoftconsRed by Newsvip Jтличный шаблон для uCoz Коррозия текста Супер шаблон для UCOZ Иконки made by avdey=) Шаблон для сайта ucozна тему GTA 4 СКАЧАТЬ кнопки для форума ucoz Шаблон для Counter Strike for uCoz Скачать иконки для ucoz Ретро эффект в 2 клика Скачать бесплатно шаблон для UCOZ от STEAM GAME by eKa Иконки груп для ucoz Надпись в стиле WEB2.0 Скачать бесплатно кнопки для ucoz Как сделать Анимированный аватар в PhotoShop Черно-белый портрет в Фотошоп Скачать сборник скриптов для ucoz за 2008-2009 год Скачать шаблон для 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)
Просмотров: 2302 | Рейтинг: 0.0/0 | |Теги:
Пожалуйста! Если вам понравился этот материал напишите свой отзыв. Посетите наш ФОРУМ


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

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

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