Суббота, 27.04.2024, 16:36


Главная
Онлайн уроки Регистрация ВходРеклама у нас / ПОМОЧЬ ПРОЕКТУ
Приветствую Вас, Новичок · RSS
Меню сайта
доска почета

brettnz69
Файлов:
10645

zyzy
Файлов:
2481

NIKIG
Файлов:
1190

didl3
Файлов:
1072
статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Сегодня были:

 Каталог статей
Обучающие уроки » Статьи » Онлайн уроки Photoshop


Рисуем дизайн веб галереи в духе Web 2.0, Clean Photo Gallery Website Layout, Онлайн уроки Photoshop

Нравится

Clean Photo Gallery Website Layout


1.

Нужно создать документ 1024?1200.
Создаем дизайн для галереи в стиле Web 2.0 *

2.

Применив paint_bucket.gif заливаем краской цвета #3E4C54.
А применив rectangular_marquee.gif нужно сделать выделение таким же образом как на картинке ниже, и закрасим его цветовой гаммой #1F2B33.
Создаем дизайн для галереи в стиле Web 2.0 *

3.

Делаем двойной на слое, в следствии чего выйдет окошко функций Blending Options. Там делаем следующие параметры:
Создаем дизайн для галереи в стиле Web 2.0 *

4.

После того как закончили с шапочкой, переходим к менюшке. Снова выбираем rectangular marquee: и заполняем цветом #FC4F83.
Добавляем туда еще две кнопки того же размера, и заливаем их цветовой гаммой #27343C. После этих действий прилепляем текст в белом цвете.

Создаем дизайн для галереи в стиле Web 2.0 *
Создаем дизайн для галереи в стиле Web 2.0 *

5.

Прибавляем текст и лого. Я применял шрифт Helvetica Neu, strong. Для текста "Your” и "Gallery" цвет #FFFFFF. На "Photo”, цвет #FC4F83. Нижестоящую надпись закрашиваем, цветом #B1D4E8.
Создаем дизайн для галереи в стиле Web 2.0 *

6.

Теперь нужно приниматься за галерею. Выбираем rounded_rectangle.gif - с параметрами: радиус 10 рх. Цвет #ECF1F3, сделав это создаем формочку как внизу.
Создаем дизайн для галереи в стиле Web 2.0 *

7.

Настала очередь создавать блок для категорий и большой блок. Выбираем rectangular_marquee.gif выделаем также как на картинке ниже и заливаем цветом #000000.

Создаем дизайн для галереи в стиле Web 2.0 *

Теперь нужно настроить Blending Options:
Создаем дизайн для галереи в стиле Web 2.0 *
Создаем дизайн для галереи в стиле Web 2.0 *

8.

Добавляем текст "Categories” белого цвета.
Создаем дизайн для галереи в стиле Web 2.0 *

Используем rectangular_marquee.gif и заливаем выделение #000000.
Создаем дизайн для галереи в стиле Web 2.0 *

Настраиваем Blending Options:
Создаем дизайн для галереи в стиле Web 2.0 *
Создаем дизайн для галереи в стиле Web 2.0 *

9.

На этом этапе нужно залить цветом #3E4C54.

Создаем дизайн для галереи в стиле Web 2.0 *

Повторяем шаг 8, для остального текста.
Создаем дизайн для галереи в стиле Web 2.0 *

10.

Повторите шаги для создания "Highest Rated” блока. И добавьте баннер 200х80.
Создаем дизайн для галереи в стиле Web 2.0 *

11.

Затем идем к главной области галереи. Применив rounded_rectangle.gif - с параметром 10 рх. Создаем формочку также как показано на фотографии ниже и заливаем белым цветом.

Создаем дизайн для галереи в стиле Web 2.0 *

Делаем двойной щелчок по слою и выставляем следующие настройки:
Создаем дизайн для галереи в стиле Web 2.0 *

12.

На 12 шаге будем работать над дизайном изображений, которые находятся внутри галереи. Применяем rounded_rectangle.gif - с размером 10 рх и цветом #ECF1F3. Необходимо создать форму по нижеприведенному образцу.

Создаем дизайн для галереи в стиле Web 2.0 *

Настройки слоя:
Создаем дизайн для галереи в стиле Web 2.0 *

13.

Сделав дубликат слоя нужно выделить, и дальше следовать в Edit>Clear или нажимаем Del на клавиатуре.
Создаем дизайн для галереи в стиле Web 2.0 *

Настройки слоя:
Создаем дизайн для галереи в стиле Web 2.0 *
Создаем дизайн для галереи в стиле Web 2.0 *

Результат:
Создаем дизайн для галереи в стиле Web 2.0 *

14.

Мы должны сделать маленькое свечение. Делаем выделение в 1 рх, заливаем белым цветом, и меняем режим слоя Soft Light, прозрачность 57%
Создаем дизайн для галереи в стиле Web 2.0 *

Результат:

Создаем дизайн для галереи в стиле Web 2.0 *

Добавляем текст белый:
Создаем дизайн для галереи в стиле Web 2.0 *

Настройки на слой с текстом:
Создаем дизайн для галереи в стиле Web 2.0 *
Создаем дизайн для галереи в стиле Web 2.0 *

15.

Добавляем дату когда пост был опубликован, используя инструмент текст и цвет #3E4C54. Добавляем рейтинг к посту, в виде звездочек.

Создаем дизайн для галереи в стиле Web 2.0 *

Добавляем в заключении текст для тегов, и текст для категории:
Создаем дизайн для галереи в стиле Web 2.0 *

16.

Добавляем нумерацию страниц, цвет цифр #1F2B33 , для активной страницы (цифры) создаем выделение и заливаем цветом #FC4F83, или форму.
Создаем дизайн для галереи в стиле Web 2.0 *

17.

Последнее что нам нужно добавить так называемый footer или нижний колонтитул. Берем rectangular_marquee.gif делаем выделение и заливаем #27343C.
Создаем дизайн для галереи в стиле Web 2.0 *

Настройки:
Создаем дизайн для галереи в стиле Web 2.0 *

18.

Добавляем текст на footer, и мы закончили.

Финальный результат:
Создаем дизайн для галереи в стиле Web 2.0 *

Смотрите также:


Категория: Онлайн уроки Photoshop | Добавил: GOR (15.12.2011)
Просмотров: 1161 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email:
Код *:
Copyright BENO Corp © 2024
кабинет
Суббота
27.04.2024
16:36

Требуются файловики за плату
Логин:
Пароль:
Пользователей: 47494 Зарегистрируйтесь чтобы убрать рекламу
Предлагаем:
БЕСПЛАТНОЕ РАЗМЕЩЕНИЕ ВАШИХ СТАТЕЙ С ВЕЧНЫМИ ССЫЛКАМИ!
Онлайн уроки
Создание типографического гранжевого ретро-постера
Рисуем системную папку ОС windows
Рисуем осенние листья
Создаем Sinedots-ёлку, этакий новогодний спецэффект
Девушку в книгу с эффектом старого издания
Создаем красивые губы
Устанавливаем Windows 7 в виртуальную машину VirtualBox и Microsoft Virtual PC
Картина "В сказочной стране" - Im Märchenland
Взрыв дизайнерского вдохновения
Эффект красивой декорации текста
НОВЫЕ КОММЕНТАРИИ
Учимся создавать собственный форум New hot project galleries, daily updates
Учимся создавать собственный форум Hot teen pics
http://1998pornpics.gul

Учимся создавать собственный форум Big Ass Photos - Free Huge Butt Porn, Big Bo

Учимся создавать собственный форум Young Heaven - Naked Teens & Young Porn Pict

Учимся создавать собственный форум Teen Girls Pussy Pics. Hot galleries


Учимся создавать собственный форум Free Porn Galleries - Hot Sex Pictures

Учимся создавать собственный форум Big Ass Photos - Free Huge Butt Porn, Big Bo

Учимся создавать собственный форум Young Heaven - Naked Teens & Young Porn Pict

Учимся создавать собственный форум My new hot project|enjoy new website
Учимся создавать собственный форум Dirty Porn Photos, daily updated galleries <

Учимся создавать собственный форум My new hot project|enjoy new website
Учимся создавать собственный форум Scandal porn galleries, daily updated lists




Любая публикация опубликованная на софт портале предоставлена только для ознакомления и является авторским материалом. Администрация не несет никакой отвественности за размещенные новости, программы, статьи и ущерб не оплачивает. Копирование без авторского разрешения уголовно наказуемо законодательством РФ и Украины: "Об авторском и смежном праве". Если вы берете новость с сайта то вы обязаны поставить активную ссылку!
Карта сайта