1.Нужно создать документ 1024?1200.
2.Применив
![paint_bucket.gif](http://demiart.ru/forum/html/psicons/paint_bucket.gif)
заливаем краской цвета #3E4C54.
А применив
![rectangular_marquee.gif](http://demiart.ru/forum/html/psicons/rectangular_marquee.gif)
нужно сделать выделение таким же образом как на картинке ниже, и закрасим его цветовой гаммой #1F2B33.
3.Делаем двойной на слое, в следствии чего выйдет окошко функций Blending Options. Там делаем следующие параметры:
4.После того как закончили с шапочкой, переходим к менюшке. Снова выбираем rectangular marquee: и заполняем цветом #FC4F83.
Добавляем туда еще две кнопки того же размера, и заливаем их цветовой гаммой #27343C. После этих действий прилепляем текст в белом цвете.
![Создаем дизайн для галереи в стиле Web 2.0 *](http://demiart.ru/tutorials/2/clean-photo-gallery-website-layout/Picture204.jpg)
5.Прибавляем текст и лого. Я применял шрифт Helvetica Neu, strong. Для текста
"Your” и "Gallery" цвет #FFFFFF. На "Photo”, цвет #FC4F83. Нижестоящую надпись закрашиваем, цветом #B1D4E8.
6.Теперь нужно приниматься за галерею. Выбираем
![rounded_rectangle.gif](http://demiart.ru/forum/html/psicons/rounded_rectangle.gif)
- с параметрами: радиус 10 рх. Цвет #ECF1F3, сделав это создаем формочку как внизу.
7.Настала очередь создавать блок для категорий и большой блок. Выбираем
![rectangular_marquee.gif](http://demiart.ru/forum/html/psicons/rectangular_marquee.gif)
выделаем также как на картинке ниже и заливаем цветом #000000.
![Создаем дизайн для галереи в стиле Web 2.0 *](http://demiart.ru/tutorials/2/clean-photo-gallery-website-layout/Picture208.jpg)
Теперь нужно настроить Blending Options:
![Создаем дизайн для галереи в стиле Web 2.0 *](http://demiart.ru/tutorials/2/clean-photo-gallery-website-layout/Picture209.jpg)
8.Добавляем текст "Categories” белого цвета.
![Создаем дизайн для галереи в стиле Web 2.0 *](http://demiart.ru/tutorials/2/clean-photo-gallery-website-layout/Picture2011.jpg)
Используем
![rectangular_marquee.gif](http://demiart.ru/forum/html/psicons/rectangular_marquee.gif)
и заливаем выделение #000000.
![Создаем дизайн для галереи в стиле Web 2.0 *](http://demiart.ru/tutorials/2/clean-photo-gallery-website-layout/Picture2012.jpg)
Настраиваем Blending Options:
![Создаем дизайн для галереи в стиле Web 2.0 *](http://demiart.ru/tutorials/2/clean-photo-gallery-website-layout/Picture2013.jpg)
9.На этом этапе нужно залить цветом #3E4C54.
![Создаем дизайн для галереи в стиле Web 2.0 *](http://demiart.ru/tutorials/2/clean-photo-gallery-website-layout/Picture2015.jpg)
Повторяем шаг 8, для остального текста.
10.Повторите шаги для создания "Highest Rated” блока. И добавьте баннер 200х80.
11.Затем идем к главной области галереи. Применив
![rounded_rectangle.gif](http://demiart.ru/forum/html/psicons/rounded_rectangle.gif)
- с параметром 10 рх. Создаем формочку также как показано на фотографии ниже и заливаем белым цветом.
![Создаем дизайн для галереи в стиле Web 2.0 *](http://demiart.ru/tutorials/2/clean-photo-gallery-website-layout/Picture2018.jpg)
Делаем двойной щелчок по слою и выставляем следующие настройки:
12.На 12 шаге будем работать над дизайном изображений, которые находятся внутри галереи. Применяем
![rounded_rectangle.gif](http://demiart.ru/forum/html/psicons/rounded_rectangle.gif)
- с размером 10 рх и цветом #ECF1F3. Необходимо создать форму по нижеприведенному образцу.
![Создаем дизайн для галереи в стиле Web 2.0 *](http://demiart.ru/tutorials/2/clean-photo-gallery-website-layout/Picture2020.jpg)
Настройки слоя:
13.Сделав дубликат слоя нужно выделить, и дальше следовать в Edit>Clear или нажимаем Del на клавиатуре.
![Создаем дизайн для галереи в стиле Web 2.0 *](http://demiart.ru/tutorials/2/clean-photo-gallery-website-layout/Picture2022.jpg)
Настройки слоя:
![Создаем дизайн для галереи в стиле Web 2.0 *](http://demiart.ru/tutorials/2/clean-photo-gallery-website-layout/Picture2023.jpg)
![Создаем дизайн для галереи в стиле Web 2.0 *](http://demiart.ru/tutorials/2/clean-photo-gallery-website-layout/Picture2024.jpg)
Результат:
14.Мы
должны сделать маленькое свечение. Делаем выделение в 1 рх, заливаем
белым цветом, и меняем режим слоя Soft Light, прозрачность 57%
Результат:![Создаем дизайн для галереи в стиле Web 2.0 *](http://demiart.ru/tutorials/2/clean-photo-gallery-website-layout/Picture2027.jpg)
Добавляем текст белый:
![Создаем дизайн для галереи в стиле Web 2.0 *](http://demiart.ru/tutorials/2/clean-photo-gallery-website-layout/Picture2028.jpg)
Настройки на слой с текстом:
![Создаем дизайн для галереи в стиле Web 2.0 *](http://demiart.ru/tutorials/2/clean-photo-gallery-website-layout/Picture2029.jpg)
15.Добавляем
дату когда пост был опубликован, используя инструмент текст и цвет
#3E4C54. Добавляем рейтинг к посту, в виде звездочек.
![Создаем дизайн для галереи в стиле Web 2.0 *](http://demiart.ru/tutorials/2/clean-photo-gallery-website-layout/Picture2031.jpg)
Добавляем в заключении текст для тегов, и текст для категории:
16.Добавляем
нумерацию страниц, цвет цифр #1F2B33 , для активной страницы (цифры)
создаем выделение и заливаем цветом #FC4F83, или форму.
17.Последнее что нам нужно добавить так называемый footer или нижний колонтитул. Берем
![rectangular_marquee.gif](http://demiart.ru/forum/html/psicons/rectangular_marquee.gif)
делаем выделение и заливаем #27343C.
![Создаем дизайн для галереи в стиле Web 2.0 *](http://demiart.ru/tutorials/2/clean-photo-gallery-website-layout/Picture2034.jpg)
Настройки:
18.Добавляем текст на footer, и мы закончили.
Финальный результат:![Создаем дизайн для галереи в стиле Web 2.0 *](http://demiart.ru/tutorials/2/clean-photo-gallery-website-layout/Picture2036.jpg)