Создание современной блог layout10 комментариев При использовании WordPress, Sidebar информация часто содержится в виджетов, поэтому я постоянно виджетов в виду при проектировании.

Это как конечный результат будет выглядетькак:

1 - Давайте начнем с импортом 960 сетку шаблона в Photoshop. 960 сетку шаблона является очень полезным инструментом для разработчиков, которые можно скачать бесплатно здесь.

2 - время для создания нашего фона. Выберите Paint Bucketинструментов и заполнения фона # 27343C.

3 - Теперь, давайте отслеживания нашего сайта Основное направление содержание. Выберите прямоугольной инструментом Marquee и создайте площади 960px широкий примерно 725px высоте. Создайте новый слой и заполните его LРАВО серый (# EEEEEE)

4 - Создайте новый слой, выбрать прямоугольную инструментом Marquee и создайте прямоугольник 420 PX широкий, начиная с 6-красный столбец из 960 сетке шаблон. Заполните прямоугольник белый белый (# FFFFFF).

5 --В окне слоев, щелкните правой кнопкой на последний созданный слой и выберите пункт "Blending Options". Применить эффект "Drop Shadow" со следующими параметрами:

6 - Давайте создадим наше главное меню навигации: Просто создайте новый слой, и Create 960px широкий squareon в верхней части страницы. Заполните его светло-серый (# EEEEEE).

7 - Pick текста инструментов и выбрать шрифт Arial. Выберите # 27343C как цвет текста, и введите свой пунктов меню (должно быть "Главная", "О нас", и т.д. Использование грID шаблон для выравнивания элементов меню.

8 - Наш проект начинает выглядеть большим, как вы думаете? Сейчас пришло время, чтобы заполнить пространство основного содержания.
Создайте новый набор слоев и назовите его "POST".
На должность титулов, я выбрал 24pt,полужирным шрифтом Грузии. Цвет # 27343C.
Миниатюра размером 180 * 180 пикселей. Это inclued в ресурсах обновления этого учебника.
Отрывок текста курсивом, 12pt Arial с # 555555 цветов.

9 - Давайте некоторое время, чтобы добавить вентиляторомCY на наш пост дисплеем. Возьмите прямоугольный инструментом Marquee и создайте 269px широкого прямоугольника. Заполните его цветом фона (# 27343C). После этого, введите текст с помощью 12pt смелые шрифт Arial, цвет # EEEEEE.

10 - Убедитесь в том, что альL конструкции элементов "пост" Содержание области находятся в слое "Пост" множество. Затем дублируем слой набора (Ctrl + J), чтобы заполнить содержанием пространство, как показано на скриншоте ниже:

11 - Теперь, давайте заполнить правой боковой панели. Благодаря этомуС небольшими размерами, он отлично подходит для частичном 125 * 125px объявлениях. Создайте новый набор слоев, назовите его "правой боковой панели", а затем забрать некоторые Реклама изображения и вставить ее в дизайне.

12 - Сейчас мы располагаем большим нетерпением правой боковой панели! Время Фильл до белого пространства на левой боковой панели с полезной информацией, которую можно найти на любой хороший блог: Автор, последних сообщений и т.д.
Создайте новый набор слоев и назовите его "левой боковой панели" на левой боковой панели Содержание. При использовании WordPress, Sidebar информацияЧасто содержится в виджетов, поэтому я постоянно виджетов в виду при проектировании.

13 - Я выбрал первое добавить информацию об авторах. Первое, что нужно сделать, это добавить свою фотографию (90 * 128px). Как только вы добавили фотографии для дизайна, щелкните правой кнопкой на PIcture слой в окне слоев, и выберите "Настройки смешивания" в меню. Перейти в "удар" и добавить 5px # DDDDDD инсульт. Затем добавить какой-нибудь текст, чтобы рассказать читателям немного о себе. Я использовал Грузию шрифтом, курсивом, размер 14pt.

14 - в заголовке, я выбрал 18pt черный шрифт Arial с # 27343C цвета.

15 - для "Узнайте больше о Jean" текста, создать новый слой, выбрать прямоугольную инструментом Marquee и создать прямоугольную форму 180 * 27 пикселей. FiLL ее # 27343C. Текст, используемый шрифт жирным Arial, 12pt.

16 - закончить наш виджет, мы должны создать разделитель. Чтобы сделать это, возьмите строки и нарисуйте горизонтальную линию ниже текста. Цвет используется # CCCCCC. После того как линия Created, щелкните правой кнопкой на слой в слоях Windows, и выберите пункт "Rasterize слой".

17 - Левая боковая панель начинает выглядеть здорово! Повторите шаги с 13 до 16 по мере необходимости, чтобы заполнить пространство боковую панель с информацией, полезной для вас.

18 - Мы почти закончили. Давайте добавим некоторую информацию о колонтитула. Просто забрать текста инструментом, # FFFFFF Грузия наклонным шрифтом, а также добавить свой Footer информации.

19 - Последний шаг заключается в создании и добавить логотип нашего дизайна. Давайте начнем сДать какой-нибудь текст, как, например, "Webdesigner Weblog". Я использовал "Санта Фе" LET шрифт. Как только написан текст, мы можем добавить стиля. Щелкните правой кнопкой на слой с текстом на слои окна и выберите пункт "Blending Options".
ВыберитеStroke "и добавить 4 пиксела инсульт. Затем выберите "Наложение цвета" и заполнить текста с фоновым цветом (# 27343C).
Для inclinate текстовый слой, убедитесь, что выбранный слой, нажмите Ctrl + T (Ctrl + T для пользователей Windows), а затем поворачивать ЛэРА бит. Для того, чтобы логотип выглядит немного лучше, мы определенно должны добавить значок, я получил, что красивый значок на палитре картины Iconfinder. [Икона была удалена из-за вопросов авторского права. Извините.]

20 - что сделано работа! Смотрите, что мы создали вместе:

Получить коммерческие / Public Licence использовать для этого PSD (Подробнее)