Urban Rivals RU
Меню сайта
Категории каталога
Материалы сайта
Облако тегов
Скачать иконки ucoz Самые популярные 20 шрифтов СКАЧАТЬ кнопки для форума Скачать автомобильный шаблон Реалистичный огонь Анимированная грозовая молния Иконки для форума UCOZ Шаблон для МегаПортала Скачать шаблон для ucoz Иконки для форумов в системе UcoZ - Темно-зеленые иконки Скачать ШАБЛОН Game RaCiNG PoRtaL Icons for uCoz Как нарисовать стеклянную кнопку Lineage Кнопки для форума UCOZ Скачать бесплатно набор шрифтов Шаблон игрового поратал для УКОЗ Шаблон для UCOZ на тему КС от ExTRa_THeMe by ToM@TiK Шаблон uCoz музыкального портала Скачать ШАБЛОН НА ТЕМУ КС CS_Team Шаблон для сайтов на uCoz Скачать шаблон на темуWarcraft 3 Portal by -=Wolf=- StyleX Шаблон для онлайн кинотеатра скачать СКАЧАТЬ КНОПКИ ДЛЯ 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)
Просмотров: 2369 | Рейтинг: 0.0/0 | |Теги:
Пожалуйста! Если вам понравился этот материал напишите свой отзыв. Посетите наш ФОРУМ


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

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

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