Создайте новый документ, размер 1200 x 1520, закрасьте фон цветом #e6e6e6.
Ширина нашего дизайна будет 900px, для этого нам надо установить поля (guides). Выберите view > new guide на верхнем меню, в появившемся окне, введите следующие значения:
Повторите это действие, только на этот раз введите следующие данные:
Создаём шапку
Создайте новый слой. Выберите инструмент Rectangular Marquee Tool (M) [показать], создайте прямоугольник, ширина которого на весь документ, а высота приблизительно 80px. Закрасьте прямоугольник любым цветом и примените следующие стили к данному слою:
У вас получится нечто похожее на это:
На левой стороне при помощи инструмента Horizontal Type Tool (T) [показать] напишите название своего сайта/блога и слоган, цвет для текста выберите #979797. Как только вы добавили текст и слоган, примените следующий стиль слоя.
У вас получится следующее:
Создаем навигацию
Используя инструмент Horizontal Type Tool (T) [показать], добавьте текст, в правой части шапки.
Используя инструмент Rounded Rectangle Tool (U) [показать] сделайте скруглённый прямоугольник под каждым словом, в вашей навигации.
Закрасьте прямоугольники любым цветом и примените следующие стили слоя:
У вас получится следующее:
Создание приветствующего блока
Используя инструмент Rectangular Marquee Tool (M) [показать] сделайте выделение под заголовком, при этом убедитесь, что вы создали новый слой.
Закрасьте выделение любым цветом и примените следующие стили слоя:
У вас получится следующее:
Теперь добавим какого-нибудь персонажа (вы можете выбрать абсолютно любую картинку, либо загрузите себе данный архив http://wefunction.com/2008/11/free-character-pack/ ). Загрузите своего персонажа в рабочее поле и поместите его как показано ниже:
Теперь отрежьте ноги там, где заканчивается приветствующее поле.
Теперь добавьте следующий стиль слоя к вашему персонажу.
С правой стороны от персонажа, добавьте какой-нибудь простой текст о своём сайте/блоге.
Создание контентного блока
Выберите инструмент Rectangular Marquee Tool (M) [показать] и сделайте выделение в правой части дизайна, вплотную к правому полю, ширина блока должна получиться 600px, но если вам нужна другая ширина, вы можете её, потом с лёгкостью изменить.
Закрасьте выделение любым цветом и примените следующий стиль слоя:
Создайте новый слой, под слоем с блоком, затем выберите инструмент Polygonal Lasso Tool (L) [показать] в углу нашего контентного блока создайте треугольник как показано ниже:
Убедитесь, что выделение не получилось выше обводки контентного блока. Закрасьте выделение цветом #a9a9a9. У вас должно получиться следующее:
Создание вида поста
Выберите инструмент Horizontal Type Tool (T) [показать] и напишите заголовок поста, цвет #666666, размер шрифта 24pt. Под заголовком напишите какие-нибудь мета данные (например: время добавления поста, дату добавления поста, автора и категорию)
Под мета данными, толщиной в 1px, нарисуйте линию светло серым цветом. Теперь загрузите к себе в компьютер следующий набор иконок (http://www.woothemes.com/2009/09/woofunction-178-amazing-web-design-icons/). С правой стороны от заголовка поста добавьте иконку, которая показана ниже. Слева от иконки добавьте какой-нибудь текст, например: "Комментарии к посту".
Завершим вид поста какой-нибудь картинкой и любым текстом. После того как вы добавили текст, добавьте кнопку "Читать далее", оформите её точно также как и кнопки в навигации. В качестве хорошего тона я так же добавил пару социальных иконок "Twitter" и "Digg".
Создание сайдбара
Сайдбар будет расположен в левой части нашего дизайна. В сайдбар я добавлю галерею flickr, так же добавьте название в шапку блока, размер шрифта 18pt, цвет #666666.
Чтобы разделить блоки нашего сайдбара, выберите инструмент Rectangular Marquee Tool (M) [показать], затем под блоком галереи flickr, сделайте две полоски толщиной в 1px. Закрасьте линии двумя различными цветами, нижнюю полоску закрасьте белым цветом, верхнюю чуть более серым, чем фон сайдбара. Наконец переместите слой (и) с полосками ниже, чем слой с контентом.
Продолжите заполнять сайдбар различной информацией. Например, я добавил последние комментарии и спонсоров.
Создание футера
Дублируйте слой, в котором содержится блок приветствия, затем перенести её в самый низ нашего дизайна. Откройте окно стилей слоя, и поменяйте цвета между stroke и inner shadow. У вас должно получиться так, что белая полоска окажется ниже серой, если вы хотите получить зазубренный эффект.
На левой стороне футера, я расположил прекрасную иконку twitter, а рядом с иконкой я нарисовал поле для сообщения, как в комиксах. Это поле является стандартным элементом Photoshop.
Добавьте в поле сообщения какой-нибудь текст и сверху напишите заголовок. В правой стороне футера, добавьте информацию об авторском праве и небольшую картинку вашего персонажа.
Создание переключателя страниц
Выберите инструмент Rectangular Marquee Tool (M) [показать] и нарисуйте несколько квадратиков по нижней полоске, как это показано ниже. Используя тот же самый метод, который мы применяли для контентного блока, добавьте небольшие серые треугольники позади квадратиков, чтобы сделать эффект, как будто они обертывают футер.
С правой стороны от навигации нарисуйте 1 квадратик и в нём расположите стрелку, затем примените к нему предыдущий эффект чтобы добится 3D эффекта.
Заключение
На этом всё, вот пример конечного результата.
Автор: HV-Designs
Переводчик: Butters