Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

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

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

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

Дизайн современного блога


Загрузите эти элементы:

шрифт “ChunkFive”
Набор иконок интерфейса
Иконки социальных средств

Шаг 1 – Создание нового документа
Создайте новый документ:

Дизайн современного блога


Шаг 2 – Создание направляющих
Чтобы лучше сориентироваться на холсте, используйте направляющие. Чтобы создать их, перейдите в меню Просмотр»Новая направляющая (View > New Guide):

Дизайн современного блога


Нужно создать 4 вертикальные и 7 горизонтальных направляющих:
Вертикальные на отметках:
115 пикселей
140 пикселей
1060 пикселей
1085 пикселей

Горизонтальные на отметках:
160 пикселей
265 пикселей
590 пикселей
890 пикселей
1300 пикселей
1360 пикселей
1490 пикселей

Шаг 3 – Создание фона
Мы создадим чёрный фон со слабым шумовым эффектом. Создайте новую группу (Create New Group), которая будет содержать все слои фона. Внутри этой группы создайте новый слой (Create New Layer) и назовите его “BG”. Установите цвет заливки - #0a0d15 и залейте им слой (Alt+Backspace).

Дизайн современного блога


Примените фильтр Добавить шум (Add Noise Filter):

Дизайн современного блога


Создайте новый слой (Create New Layer) и назовите его “Block”. Этот слой должен быть над слоем “BG”. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение между первой и третьей направляющими. Залейте выделение чёрным цветом.

Дизайн современного блога

Дизайн современного блога


Понизьте Непрозрачность до 30%.

Дизайн современного блога


Создайте ещё два чёрных блока таким же способом:

Дизайн современного блога


Теперь создадим внутреннюю границу блоков. Создайте новый слой (Create New Layer), установите цвет заливки - #080a0f. Инструментом Карандаш (Pencil Tool) размером 1 пиксель нарисуйте горизонтальную линию в верхней части первого блока (удерживайте Shift, чтобы нарисовать прямую линию).

Дизайн современного блога


Установите цвет заливки - #121829 и нарисуйте ещё одну линию под первой.

Дизайн современного блога


Сделайте 4 копии слоя с линиями. Расположите их на 3-ей, 4-ой, 6-ой и 7-ой горизонтальных направляющих. Выберите слой с линией, расположенной на 3-ей горизонтальной направляющей, перейдите в режим Свободного трансформирования (Free Transform) и установите значение высоты: -100. Сделайте то же самое для линии на 6-ой направляющей.

Шаг 4 – Создание логотипа блога
Мы закончили с фоном, теперь перейдём к шапке сайта. Создайте новую группу (Create New Group) и назовите её “Header”. Из набора иконок интерфейса выберите пузырь речи (файл “chat_256.png”) и откройте его в Photoshop. Перейдите в меню Размер изображения (Ctrl+Alt+I) и установите значение ширины и высоты – 44 пикселя. Перетащите иконку в наш документ и расположите на левой стороне шапки.

Дизайн современного блога


Теперь напишем название логотипа. Выберите инструмент Горизонтальный текст (Horizontal Type Tool), шрифт – “ChunkFive” (можете загрузить его в начале урока) размером 30pt., Метод сглаживания – Резкое (Sharp). Напишите любое название. Цвет не важен, так как мы его изменим.

Дизайн современного блога


Перейдите в меню Стилей текстового слоя (Layer Style - Blending Options) и настройте так:

Отбрасывание тени (Режим – Нормальный):

Дизайн современного блога


Наложение градиента (Режим – Нормальный, Стиль – Линейный, Цвет - #4d5266 - #5f677c - #5f677c - #989ea):

Дизайн современного блога

Дизайн современного блога


Теперь создадим световое пятно под текстом, которое усилит эффект тени. Создайте новый слой под слоем с логотипом, установите цвет заливки – белый. Выберите инструмент Кисть (Brush Tool), мягкую кисть размером 200 пикселей и кликните один раз в центре текста. Установите Режим наложения этого слоя – Мягкий свет (Blending Mode – Soft Light) и Непрозрачность – 50%.

Дизайн современного блога


Шаг 5 – Создание главного меню
Текстовым инструментом напишите разделы меню цветом #7a7a7a. Шрифт – “Arial” размером 14pt.

Дизайн современного блога


К текстовым слоям примените стиль Отбрасывание тени (Layer Style - Drop Shadow):

Дизайн современного блога


Создадим активный раздел. Измените цвет слова “Blog” на #e5e5e5. Также нужно изменить фон активного раздела. Создайте новый слой под словом “Blog”, цвет заливки – белый, инструментом Прямоугольник (Rectangle Tool) создайте прямоугольник под активным текстом. Понизьте Непрозрачность слоя до 4%.

Дизайн современного блога


Мы закончили с шапкой, можно двигаться дальше.

Шаг 6 – Создание текста приветствия
Создайте новую группу “Body”, в ней будут находиться все слои области контента. Всегда лучше создавать группы для основных областей. Это не даст вам запутаться и работать будет легче. Выберите инструмент Горизонтальный текст (Horizontal Type Tool), шрифт “ChunkFive” размером 24pt. Напишите приветствие типа "Welcome to Design Instruct Studio Blog". Расположите его в центре холста под шапкой сайта .Можете скопировать стили с логотипа и вставить их на слой приветствия.

Дизайн современного блога


Шаг 7 – Создание фона главного контента
Для основного контента мы создадим серый закруглённый прямоугольник. Цвет заливки - #e8e8e8. Инструментом Прямоугольник с закруглёнными углами (Rounded Rectangle Tool) с радиусом 5 пикселей создайте фигуру, используя направляющие, как показано ниже.

Дизайн современного блога


Шаг 8 – Создание второго навигационного меню
Вторая навигация будет расположена в верхней части области контента. Вторая навигация позволит переключаться между категориями блога. Установите цвет заливки - #989eac. Текстовым инструментом напишите названия разделов. Шрифт тот же “ChunkFive” размером 14pt.

Дизайн современного блога


Установите цвет заливки - #505050 и инструментом Прямоугольник с закруглёнными углами (Rounded Rectangle Tool) с радиусом 5 пикселей создайте фигуру под одним из названий разделов.

Дизайн современного блога


К прямоугольнику примените эти стили:

Отбрасывание тени:

Дизайн современного блога


Внутренняя тень:

Дизайн современного блога


Понизьте Непрозрачность прямоугольника до 20%. Измените цвет текста активной категории на #f5f5f5.

Дизайн современного блога


Создадим разделитель под вторым навигационным меню. Создайте новый слой, установите цвет заливки - #c0c0c2. Инструментом Карандаш (Pencil Tool) размером 1 пиксель нарисуйте горизонтальную линию. Потом нарисуйте вторую линию белого цвета под первой. Понизьте Непрозрачность слоя до 50%.

Дизайн современного блога


Шаг 9 – Создание первой новости блога
Создайте новую группу внутри группы “Body” и назовите её “Blog Post”.
Создайте вертикальную направляющую, которая визуально отделит область контента от сайдбара на правой стороне. Новая вертикальная направляющая должна быть на отметке 720 пикселей. Напишите заголовок новости: шрифт – “Georgia”, Italic, размером 24pt. Нужно оставаться в пределах вертикальных направляющих. Для этого текстовым инструментом сначала создайте область для текста (как выделение), а потом уже пишите.

Дизайн современного блога


К заголовку примените эти стили:

Отбрасывание тени:

Дизайн современного блога


Займёмся изображением новости. Установите цвет заливки - #d5d5d5. Инструментом Прямоугольник (Rectangle Tool) создайте фигуру под названием в пределах направляющих.

Дизайн современного блога


Вставьте какую-нибудь картинку на этот прямоугольник. Не беспокойтесь, если картинка выходит за границы прямоугольника, мы это исправим. Сделайте выделение слоя с фоновым прямоугольником (Ctrl+Click) и примените Сжатие (Modify – Contract) со значением 5 пикселей. Перейдите на слой с картинкой, скопируйте выделение (Ctrl+C) и вставьте его (Ctrl+V). У вас автоматически создастся новый слой. Можете удалить оригинальный слой и у вас останется только скопированная часть в 5-пиксельной рамке.

Дизайн современного блога


Создадим кнопку “Read More”. Создайте закругленный прямоугольник чёрного цвета с радиусом 5 пикселей. Расположите его, как показано ниже.

Дизайн современного блога


Растрируйте слой с прямоугольником (Rasterize - Shape). Теперь нужно удалить часть прямоугольника, которая выходит за границы изображения. Сделайте выделение слоя с картинкой (Ctrl+Click), инвертируйте его (Select – Inverse) и нажмите Delete. Теперь кнопка выглядит так, как будто она обвёрнута вокруг картинки и с другой стороны. Понизьте Непрозрачность прямоугольника до 50%. Выберите текстовый инструмент, шрифт – “Arial”, начертание – Regular, размер – 12pt. цвет – белый. Напишите на кнопке “Read more” в центре кнопки.

Дизайн современного блога


Сейчас мы создадим тень под областью картинки. Создайте новый слой под серой рамкой картинки, установите цвет заливки – чёрный, и инструментом Прямоугольник (Rectangle Tool) создайте прямоугольник, показанный ниже.

Дизайн современного блога


Растрируйте фигуру и измените её в режиме Деформации (Transform – Warp), как показано ниже.

Дизайн современного блога


Потом примените фильтр Размытие по гауссу (Gaussian Blur Filter).

Дизайн современного блога


Понизьте Непрозрачность слоя до 20%. Можете немного поднять тень.

Дизайн современного блога


Установите цвет заливки - #989eac и текстовым инструментом напишите описание новости под картинкой. Шрифт – “Arial” размером 19pt.

Дизайн современного блога


Нужно скопировать разделительную линию, находящуюся под навигационным меню. Для этого инструментом Прямоугольная область (Rectangular Marquee Tool) сделайте выделение линии.

Дизайн современного блога


Перейдите на слой, содержащий эту линию и нажмите Ctrl+C. Вернитесь к группе “Blog post” и вставьте выделение (Ctrl+V). У вас автоматически создастся новый слой. Инструментом Перемещение (Move Tool) расположите линию в нужно месте. Понизьте её Непрозрачность до 50%.

Дизайн современного блога


Шаг 10 – Создание второй новости
Сделайте копию слоя “Blog post” и опустите её вниз:

Дизайн современного блога


Измените название новости, картинку и описание. Я использовал эту картинку.

Дизайн современного блога


Шаг 11 – Создание навигации по страницам
Создайте новую группу, установите цвет заливки - #989eac, выберите текстовый инструмент, шрифт – “Arial”, Regular, размером 14pt. и напишите “Pages” слева снизу, и номера страниц и слово “Last” справа снизу.

Дизайн современного блога


Шаг 12 – Создание сайдбара
Создайте новую группу для сайдбара. Нам понадобится направляющая, которая определит левую границу сайдбара. Также нужно оставить расстояние между областью с новостями и сайдбаром. Создайте вертикальную направляющую на отметке 760 пикселей. Установите цвет заливки - #989eac, шрифт – “ChunkFive” размером 18pt. и напишите “Sponsors” в верхней левой части сайдбара. Скопируйте стиль отбрасывания тени с заголовка новости и вставьте на новый текстовый слой.
Вставьте какой-нибудь баннер размером 300×250 пикселей под словом “Sponsors”. Я вставил два: этот и этот.

Дизайн современного блога


Под баннерами напишите заголовок “Popular Posts”. Ниже напишите названия популярных новостей шрифтом “Arial” размером 14pt. Потом создайте ещё один блок “Friends”.

Дизайн современного блога


Шаг 13 – Социальные средства
Создайте новую группу. Напишите “Connect Us:”, используя шрифт “ChunkFive” размером 24pt. Скопируйте стили текста приветствия и вставьте сюда:

Дизайн современного блога


Инструментом Прямоугольник с закруглёнными углами (Rounded Rectangle Tool) создайте 4 белых прямоугольника в ряд. Потом понизьте их непрозрачность до 4%.

Дизайн современного блога


Я использовал набор иконок социальных средств, который можно скачать в начале урока. Из набора выберите 4 иконки, которые вам больше всего нравятся и откройте их в Photoshop. Перейдите в меню Изображение»Размер изображения (Image > Image Size) и уменьшите до размера 42х42. Скопируйте их в наш документ и расположите на 4 прямоугольниках, которые только что создали. Также нужно будет их подписать. Я использовал шрифт “Arial” размером 14pt. цветом #989eac.

Дизайн современного блога


Шаг 14 – Создание простого футера
Создайте новую группу, установите цвет заливки - #8f9093, шрифт “Arial” размером 13pt. Напишите текст о правах.

Дизайн современного блога


В области футера справа вставьте иконку twitter (её тоже нужно уменьшить до 42х42 пикселя). Тем же шрифтом напишите “Follow us on Twitter!”. Под этим текстом создайте прямоугольник с закруглёнными углами с радиусом 15 пикселей чёрного цвета.

Дизайн современного блога


К прямоугольнику примените стиль Отбрасывание тени (Layer Style - Drop Shadow):

Дизайн современного блога


Понизьте Непрозрачность слоя до 40% и вы увидите что получился эффект вдавленности.

Дизайн современного блога


Финальный результат:

Дизайн современного блога


Результат в оригинальном размере можете посмотреть здесь.



Обсудить данный урок на форуме





PSD файл

Ссылка на источник урока