Как создать шаблон для сайта — галереи

1. Открываем photoshop и создаём документ со следующими параметрами.

новый документ

Теперь включаем линейку и направляющие. Вместе с этим вы должны включить панель информации (Window->Info), которая упростит вам работу с линейкой.

информация о линейки и направляющих

2. Т.к. большинство сайтов сделаны на основе системы 960.gs, то и нам необходимо ограничить наше пространство именно этим размером. Следовательно нам нужно получить ширину в 960 пикселей. Создаём первую направляющую (View->New Guide) Поставим начальную позицию в 120 пикселей, чтобы иметь пространство с обеих сторон.

Теперь прибавим к нашей начальной точке (а это 120 пикселей) ещё 960 и получим конечную точку (1080). Повторим предыдущий шаг и создадим вторую направляющую.

направляющие3. Теперь нарисуем шапку шаблона. Обычно в шапке располагаются 3 элемента: логотип, навигация и поиск. Чтобы всё было организовано создаём новую папку и называем её «Шапка», внутри неё создаём ещё 3 папки с названиями «Логотип», «Навигация» и «Поиск». В папке «Шапка» создаём новый слой и называем его «фон».

слои - рисунок1Берём прямоугольный инструмент и рисуем прямоугольник размером 100% в ширину и 100 пикселей в высоту. Вы можете это сделать при помощи направляющей.

горизонтальная направляющая
Слой «Фон» заливаем градиентом со следующими цветами : dcdcdc, ffffff

заполняем градиентом

На расстоянии 55 пикселей от верха шаблона будем рисовать 2 линии при помощи инструмента «Линия» (Line Tool) размером 1 пиксель.

линии

4. Теперь создадим паттерн. Для этого нам нужно создать новый документ с размерами 9 пикселей в ширину и 7 пикселей в высоту. Задний фон должен быть прозрачным. Используйте инструмент «Карандаш» цвета cfcfcf. Теперь нарисуйте рисунок, который представлен на рисунке ниже. И определите паттерн (Edit->Define Pattern).

паттерн

Полученным паттерном мы зальём область чуть выше серой линии. Выберите инструмент заливки и вместо краски(foreground) выберите pattern.заливка образцом

После заливки у вас должно было получится следующеепосле заливки

5. Теперь создадим логотип. Выберите любой вам понравившийся шрифт и напишите то что вам вздумается.

Можете использовать следующие цвета : 494367 и A5AB0D и добавить несколько эффектов.текстовые эффекты

Итак получим логотип

логотип6. Добавляем навигацию и поиск.

Цвет основных пунктов меню будет 252525 и 555555, а также добавим эффект тени.

навигация

Для создания поиска мы будем использовать инструмент прямоугольника с закруглёнными углами. Радиус углов установим равным 10 пикселей, ширину фигуры 275 пикселей. При помощи трансформации — Distort удлиняем один из концов фигуры.трансформация фигуры

Лишнюю часть фигуры необходимо замаскировать . Для этого цвет заливки устанавливаем в чёрный цвет. Кликаем по слою «Фон» для того чтобы выделить всю область, далее выбираем слой фигуры поиска и нажимаем иконку «Маска»

наложение маскиТеперь добавим парочку эффектов. Градиент имеет следующие цвета: e6e6e6 и dcdcdc.эффекты для поиска

7. Теперь давайте создадим кнопку поиска. Выделите получившиеся поля поиска. Далее Select->Modify->Contract 2 пикселя. выделениеПосле выберите инструмент Rectangular Marquee Tool уменьшите полученную выделенную область до той, которую вы бы хотели иметь для кнопки.

выделениеСоздайте новый слой и заполните полученную область любым цветом.

полученная областьПолученной области зададим следующие эффекты.

Теперь на полученную кнопку наложим форму лупы и придадим ей цвет -c8c8c8 и тень в 1 пиксель цвета ffffff.

кнопка поиска

Создание слайдера.

8.  Создаём новую папку и называем её «Слайдер» . Внутри создаём новый слой, и заполняем выделенную область в 250 пикселей высоту и 100% в ширину цветом — 413f6b и добавляем эффект внутренней тени со следующими параметрами.эффект

Выбрав слой, выбираем  Filter-> Convert for Smart Filters. Наш слой превратился в Smart Object, теперь мы можем добавить фильтр Filter-> Noise->Add noise со следующими параметрами. параметры для фильтраДобавляем контроллеры. Внутри папки «Слайдер» создаём ещё одну папку с названиями След. и Пред. Выберем инструмент эллипс и зададим ему фиксированные размеры 40 на 40 пикселей полученный круг зальём цветом — 676589. Выберем форму стрелочки, любой на ваш вкус. И вставим поверх кружочка на новом слое. Стрелочка должна быть чёрного цвета, чтобы мы могли наложить маску.

Выделяем слой с нашей стрелочкой (Ctrl + Click по нашему слою)дальше нажимаем Ctrl + Shift + I — для того чтобы выделить обратную часть. Далее выберем слой с эллипсом и нажмём кнопку «Маска» . Теперь возьмём изображение и вставим текст.слайдер

Добавим панель навигации.

Выбираем инструмент прямоугольника с закруглёнными углами с радиусом в 10 пикселей, шириной 130 пикселей и высотой 25. Заливаем его градиентом со следующими цветами: dcdcdc и ffffff. панель навигацииКнопки для навигации будут круглыми, не активная кнопка имеет цвет — d4d4d4, а активная  — a5ab0d. Для каждого маркера добавим эффект тени эффекты-2

Так выглядит наша панель.Так выглядит наша панельПридадим всему слайдеру тени. Выберите инструмент прямоугольника с шириной в 100% и высотой 5 пикселей и чёрным цветом.Создайте новый слой и установите режим multiply , а прозрачность в 30%.

Теперь выделаем область панели навигации и выберите Select->Modify->Expand.

Последний шаг, добавляем немного света в область слайдера там где находится изображение.Выберите инструмент кисти и установите hardness на 0, а размер кисти на 400. Выделите всю область слайдера. В том месте где находится изображение, нанесите кистью рисунок на новом слое, который должен располагаться ниже слоя с изображением, и задайте ему Blend Mode = Soft Light.

В итоге мы получим слайдер.слайдер

Создание галереи.

9. Создаём новую папку и называем её «Галерея» в ней создаём новый слой и заливаем его в высоту 200 пикселей а в ширину 100%. Заливаем область цветом — ededed. Дальше создадим 2 линии с шириной в 1 пиксель.Первая линия будет белая (ffffff) мы её поместим на самый верх нашей формы, а вторая будет серого цвета (c2c2c2) и располагаться она будет внизу.

Создадим новый слой и назовём его «подсветка». Выберем инструмент кисти с цветом ffffff и в центре нашей галереи нанесём рисунок, после установим свойства слоя в Soft Light.рисунок 1

В папке «Галерея» создаём новую папке под названием «Пост». Возьмите изображение размером 100 на 100 пикселей и вставьте произвольный текст (название должно быть 16 пикселей цвета — 363636, а текст 11 пикселей с цветом 636363). Придадим тени нашей иконки. Для этого под слоем с иконкой создадим ещё один слой и назовём его «тень». Используя инструмент Pen Tool создадим форму указанную на рисунке ниже.форма тени

Далее выбираем Filter->Blur->Gaussian Blur 1 пиксель и устанавливаем прозрачность (opacity) слоя на 50%. В итоге получим почти готовый пост.пост для галереи

Теперь необходимо добавить рейтинг. Для этого создаём папку «Рейтинг». Возьмите иконку или форму звёздочки. И нарисуйте её чуть ниже основного текста поста и добавьте ей следующие эффекты.

Теперь выделите звёздочку (ctrl+ клик по слою) и уберите выделение до середины, т.е. у вас должно быть выделена часть начиная  от верха до середины формы ) Создайте новый слой и залейте его градиентом с начальным цветом белым, а конечный цвет должен быть прозрачным. Свойство «Прозрачность» слоя установите равным 70%. В итоге вы получите следующую звёздочку. Продублируйте полученную форму ещё 4 раза.звёздочкаТеперь можно добавить ещё 2 таких же поста и мы получим готовую галерею.галерея

Создание постов.

10. Создаём новую папку и называем её «Посты». Цвет основного фона будет теперь — ededed. В папке создаём новую папку и называем её «Пост». Берём иконку размером 300 на 200 пикселей. Теперь создадим прямоугольную область с размерами 300 на 45 пикселей и заполним её любым цветом, поместив её сразу же снизу от иконки.подготовка поста

Для полученного чёрного прямоугольного слоя добавим следующие эффекты. Для градиента использовались следующие цвета f7f7f7 и ffffff.эффекты поста

Теперь в полученной нижней панели пишем название статьи цветом 363636 и размером шрифта 16 пикселей, а также добавляем звёздочки (5 штук) Для того чтобы сделать звёздочку не выбранной у основной звёздочки убираем градиент и добавляем внутреннюю тень с параметрами: прозрачность 30%, расстояние 1 пиксель и размытость 1 пиксель, также звёздочку можно залить серым цветом (ededed) для большего эффекта. Вот что мы должны были получить в итоге.готовый пост

Теперь заполняем рабочую область таким количеством постов каким хотите.

Добавление навигации.

11. Создайте прямоугольную область с закруглёнными углами в 5 пикселей и фиксированным размером 620 на 45 пикселей. Добавьте слою внутренней тени с прозрачность в 50%, расстоянием 1 пиксель и размытостью в 3 пикселя. Теперь напишите внутри цветом 7E7E7E:  Страница 1 из 10, цвет чисел будет 363636, а ссылка «Последняя» 7266FE

Навигация должна выглядеть следующим образом.навигация

Сайдбар.

12. Создаём папку и называем её «Сайдбар». Создаём линию в ширину 1 пиксель цвета c2c2c2. На слой накладываем маску. Выбираем круглую размытую кисть чёрного цвета и удаляем низ линии. Дублируем полученную линию, передвигаем её влево на 1 пиксель и задаём ей основной цвет белый. Теперь точно также создаём горизонтальные линии.. У вас должно было получится следующее.основные линииТеперь ниже слоёв с линиями создаём новый слой и называем его «Тень».  При помощи инструмента выделения, градиента и стёрки создайте следующий эффект. После прозрачность слоя  «Тень» установите в 50%, а режим поставьте Multiply. Продублируйте слой и поверните его на 90 градусов, поместив сверху. Вы должны получить следующее.основа сайдбара

Возьмите инструмент прямоугольника с закруглёнными углами в 10 пикселей. Создайте форму высотой 40 пикселей и длиной на всю ширину сайдбара. Добавьте ему эффект градиента со следующими параметрами. Цвета 494367, 6b6393 и 494367.градиент

Теперь добавьте название белым цветом, размер шрифта 16 пикселей. Цвет названий категории будет 655DF3, разделяющие линии выполнены следующим образом верхняя серая (c2c2c2), а нижняя белая, обе в 1 пиксель шириной. В итоге получим следующее.сайдбар

Подвал.

13. Создаём новую папку под названием «Подвал». Внутри папки создадим ещё 3 папки со следующими названиями: «О нас», «Популярное, «Ссылки»».  На расстоянии 50 пикселей от навигации, нарисуйте прямоугольник при помощи  инструмента прямоугольник и залейте всю оставшуюся нижнюю область цветом 413f6b. После добавьте эффект внутренней тени с прозрачностью в 30%, расстоянием 3 пикселя и чёрным (000000) цветом. Превратите слой в Smart Filters (Filter->Convert  for Smart Filters) После этого добавьте шума (Filter->Noise->Add Noise). Чуть ниже получившейся внутренней тени добавьте белую полоску в 1 пиксель цвета ffffff и с 20% прозрачностью.

В итоге вы должны будете получить это.подвал - фон
Теперь добавляем текст.

В итоге получим следующее.

подвал

Теперь добавим запись Copyright и кнопку «Вверх».

Для кнопки вверх берём любую стрелку и поворачиваем её на 90 градусов и добавляем следующие эффекты.

И добавляем надпись Copyright 2011 Галерея.

Всё, так выглядит наш шаблон для сайта.галерея

Мою версию шаблона можно скачать здесь — > Галерея

Урок был написан на основе урока Михайла Бёрнса.



Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *