Urban Rivals RU
Меню сайта
Категории каталога
Материалы сайта
Облако тегов
Как нарасовать UserBar в фотошопе (Photoshop) Как сделать картинку в стиле Ретро Отличный шаблон для ucoz Скачать шаблон для футбольного сайта СКАЧАТЬ кнопки для форума ucoz Скачать шаблон для онлайн фильмов Отличный шаблон для ucoz на тему кино СКАЧАТЬ ШАБЛОН ДЛЯ UCOZ cs ! шаблон для сайта на тему lineage Набор иконок для форумов в системе UcoZ - Оранжевые иконки Скачать шаблон для БЛОГА Скачать бесплатно шаблон на тему S.T.A.L.K.E.R Шаблон для uCoz Скачать Скачать иконки ucoz Скачать шаблон для клана CS 1.6 Иконки для УКОЗ Скачать шаблон для блога Шаблон на тему Lineage СКАЧАТЬ КНОПКИ ДЛЯ ucoz Космический неон Кнопки для форума UCOZ Скачать шаблон РЭП дизайн Как работать в Photoshop - Foto Иконки групп by kz-love Скачать бесплатно шаблон для ucoz ЛАЙМ NIVAS
Главная » Статьи » Уроки 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)
Просмотров: 2305 | Рейтинг: 0.0/0 | |Теги:
Пожалуйста! Если вам понравился этот материал напишите свой отзыв. Посетите наш ФОРУМ


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

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

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