Простой дизайн блога

10 мая 2012 · Глеб Х. · «Мир Фотошопа»

Конечный результат:

Шаг 1

Загрузите сетку «960 Grid System» и откройте файл «960_grid_12_col.psd». «960 Grid System» это набор готовых сеток, который часто используется для разметки области в веб-дизайне. При помощи такой сетки у Вас не будет проблем с правильным размещением блоков сайта.

Шаг 2

Сделайте копию фонового слоя (Ctrl + J). Кликните дважды на копии, чтобы открыть окно стилей, и примените стиль Gradient Overlay:

Шаг 3

Чтобы лучше видеть фигуры, которые мы будем создавать, сетку можно скрыть (Ctrl + H). Инструментом Rounded Rectangle Tool (U) создайте прямоугольник в верхней части холста.

Шаг 4

К созданному прямоугольнику примените следующие стили:

Шаг 5

Тем же инструментом создайте большой прямоугольник цветом #001424.

Шаг 6

Примените стиль Inner Glow к новой фигуре.

Шаг 7

Создайте ещё одну фигуру белого цвета внутри предыдущего прямоугольника.

Шаг 8

Примените к белому прямоугольнику стиль Inner Glow и понизьте Fill Opacity слоя до 10%.

Результат:

Шаг 9

Поверх последней фигуры вставьте какое-нибудь изображение, отражающее тематику сайта. Чтобы изображение не выходило за пределы прямоугольника, нужно его ограничить при помощи обтравочной маски. Расположите слой изображения прямо над слоем прямоугольника в палитр слоёв. Находясь на слое с изображением, нажмите Ctrl + Alt + G, чтобы создать обтравочную маску (также можете воспользоваться контекстным меню слоя). Но я просто воспользовался инструментом Free Transform (Ctrl + T), чтобы изменить размер. Это было нужно для следующего шага.

Шаг 10

Сделайте выделение слоя с изображением (удерживая Ctrl, кликните на иконке слоя в палитре слоёв).

Шаг 11

Создайте новый слой (Ctrl + Shift + N) поверх остальных, выберите инструмент Brush Tool (B) и нарисуйте горизонтальную линию чёрного цвета. Удерживайте Shift, чтобы линия была прямой. Если Вам покажется, что нижний край слишком сильно затемнён, понизьте Opacity, либо рисуйте краем кисти.

Шаг 12

Уберите выделение (Ctrl + D) и инструментом Rounded Rectangle Tool (U) создайте ещё одну фигуру цветом #4b6e82.

Шаг 13

Примените следующие стили:

Шаг 14

Инструментом Ellipse Tool (U) создайте чёрный овал под слоем с правым прямоугольником.

Шаг 15

К слою с овалом примените фильтр Gaussian Blur (Filter → Blur → Gaussian Blur) со значением Radius — 4,5 пикселей. На вопрос о растрировании слоя, ответьте ОК.

Шаг 16

После применения фильтра овал превратился в тень. Теперь нужно выделить её, добавив немного света. Выберите инструмент Line Tool (U): Weight — 1 пиксель. Создайте вертикальную линию на краю прямоугольника, как показано ниже.

Шаг 17

Кликните правой кнопкой мыши на слое с созданной линией и выберите пункт Rasterize Layer.

Шаг 18

Выберите инструмент Eraser Tool (E) размером 100 пикселей с мягкими краями. Подотрите верхнюю и нижнюю части линии.

Шаг 19

Тем же способом добавьте ещё одну белую линию на верхнюю границу.

Шаг 20

Под белой линией создайте чёрную.

Шаг 21

Создайте область контента при помощи инструмента Rectangular Marquee Tool (U).

Шаг 22

Создайте ещё несколько прямоугольников инструментом Rectangle Tool (U).

Шаг 23

Ко всем трём прямоугольникам добавьте стиль Stroke.

Шаг 24

Вставьте изображение в белые квадраты и инструментом Horizontal Type Tool (T) напишите текст постов.

Шаг 25

Тем же текстовым инструментом создайте разделитель между постами.

Шаг 26

Создайте прямоугольник и впишите в него информацию о посте.

Шаг 27

Инструментом Rectangular Marquee Tool (U) создайте прямоугольник над сайдбаром. На скриншоте ниже видно, что я добавил навигационные ссылки.

Шаг 28

К созданному прямоугольнику примените следующие стили:

Шаг 29

Создайте ещё один закруглённый прямоугольник над предыдущим и справа от него вставьте иконку лупы.

Шаг 30

В области слайдера создайте прямоугольник с закруглёнными углами.

Шаг 31

Примените следующие стили:

Шаг 32

Выберите инструмент Pen Tool (P) и, удерживая Ctrl, кликните дважды на крае фигуры. Якорная точка станет редактируемой.

Шаг 33

Удерживая Ctrl, выберите точку, отмеченную ниже.

Шаг 34

Удерживая Shift, один раз нажмите на клавишу стрелки вниз на клавиатуре.

Шаг 35

Инструментом Ellipse Tool (U) создайте круг, как показано ниже.

Шаг 36

Кликните правой кнопкой мыши на слое с кругом и выберите пункт Rasterize Layer. Затем инструментом Rectangular Marquee Tool (M) создайте выделение, показанное ниже.

Шаг 37

Находясь на слое с кругом, нажмите Delete. Расположите его над фоновым слоем.

Шаг 38

При помощи инструмента Rounded Rectangle Tool (U) создайте две кнопки справа от полоски и текстовым инструментом напишите текст. Инструментом Custom Shape Tool (U) создайте стрелки.

Шаг 39

На сайдбаре создайте несколько белых прямоугольников.

Шаг 40

Примените к ним следующие стили:

Шаг 41

Добавьте баннеры в сайдбар. Также вставьте иконки социальных сетей.

Шаг 42

Текстовым инструментом напишите названия разделов. Используйте знак минуса, чтобы создать разделители.

Шаг 43

При помощи инструмента Line Tool (U) создайте две 1-пиксельные линии чёрного и белого цвета рядом. Это будет разделитель для верхней навигационной панели.

Шаг 44

Выберите оба слоя с линиями (разделителем верхней панели) и нажмите Ctrl + E, чтобы объединить их в один растрированный слой. Выберите инструмент Eraser Tool (E) и подотрите концы. Используйте мягкую кисть размером 20 пикселей.

Шаг 45

Установите Blending Mode слоя с разделителем на Soft Light. Создайте несколько копий разделителя и расположите их между остальными ссылками.

Шаг 46

Создайте логотип в левом углу при помощи текстового инструмента.

Шаг 47

Примените следующие стили к текстовому логотипу:

Шаг 48

Прямо над фоновым слоем создайте новый слой (Ctrl + Shift + N). Выберите инструмент Brush Tool (B) с мягкими краями и создайте большое светлое пятно.

Шаг 49

Установите Blending Mode этого слоя на Soft Light.

Конечный результат:

Поделитесь уроком

Чириканье Мыло Вконтактик Рожи ЖэЖэ Яша

Правовая информация

В случае копирования урока указывайте автора и ставьте активную гиперссылку на наш сайт. Более подробную информацию вы можете получить в разделе «Правовая информация».

Переведено с сайта psd.tutsplus.com, автор перевода указан в начале урока.

Печное оборудование; печь термофор . Выезд замерщика бесплатно.