Реклама и Статистика


SEO sprint - Всё для максимальной раскрутки!





Создание дизайна современного блога в Photoshop

Данный урок охватывает процесс создания красочного современного дизайна блога в Adobe Photoshop. Вот конечный результат урока.

Этот дизайн разработан мной в качестве печатной темы для Springy Developments. Принимая во внимание, что во время оригинального создания контекста процесс был менее ясным ограничимся следующими шагами. Проводилось много экспериментов и элементы часто обновлялись, чтобы узнать, что работает лучше. Однако, такие исследования дают хорошее понимание какие инструменты и техники используются для создания выбранного шаблона. Откройте Adobe Photoshop и создайте новый документ. Я люблю работать с большим документом (для данного урока я выбрала размеры 1680х1024 пикселей), что отражается в большом разрешении. Помните, что необходимо создать документ в режиме RGB и с разрешением 72dpi. В первой области работает фон данной страницы, где интерес может быть представлен залитым пространством на высоком разрешении. Выберите мягкий цвет для фона, затем протяните радиальный градиент сверху к центру. Очевидно выбор цветовой палитры зависит от вас, но здесь я использовала смесь зеленного и сиреневого.

Откройте изображение коричневой бумаги (brown paper), которое будет использовано для добавления некоторого интереса к текстуре фона.

Обесцветьте текстуру (CTRL+SHIFT+U), затем добавьте достаточно большое размытие по Гауссу для удаления большей части красивых деталей (Filter>Blur>Gaussian Blur с настройками как на рисунке).

Поместите текстуру поверх градиента и измените blending mode на Overlay. После этого уменьшите opacity до 90%.

Когда работаешь с дизайном сайта, диапазон пользовательских мониторов играет большую роль в шаблоне сайта. Если иное не требуется, я уменьшаю разрешение до 1024×768, поэтому направляющие нарисованы на 960 px ширины в центре документа, это дает около 40 px пространства с каждой стороны как небольшое дополнение, когда элементы выходят за пределы экрана.

С помощью Rounded Rectangle Tool с радиусом 20 пикселей нарисуйте основную область сайта и залейте ее светлым серым цветом (#eeeeee). Обратите внимание, что в данном случае прямоугольник занимает все пространство между двумя.

Двойной щелчок по слою с прямоугольником и примените обводку (stroke) белого цвета и размером 8 пикселей. Измените Blend Mode на Overlay и уменьшите opacity до 30% для придания классного прозрачного эффекта.

Добавьте легкое внутреннее свечение (Inner Glow) прямоугольнику белого цвета и размером 5px для придания эффекта очень легкой выпуклости краям.

Наконец, добавьте внешнее свечение (Outer Glow) черного цвета с opacity 15% для придания легкой тени контекстной области.

На новом слое нарисуйте другой прямоугольник с закругленными краями той же ширины, что и первый, но на этот раз радиус закругления 10px. Добавьте внизу небольшой градиент от серого к прозрачному.

Щелкните правой кнопкой мышки по слову Effects в слое с первым прямоугольником и выберите Create Layers. На новом созданном слое, который состоит из обводки (stroke), воспользуйтесь eraser tool для стирания нижней половины обводки.

Добавьте небольшой штрих с помощью рисования Pencil Tool вертикальной линии в 1 пиксель во весь край. Зажмите Shift для ограничения оси для придания прямоты края.

Сотрите линию с помощью eraser tool для создания впечатления, что оставшаяся часть границы сливается с черным цветом.

Контекстная (основная) область представляет собой плоскую серую область, которая немного затемнена внизу. Верхние углы имеют больший радиус, чем нижние, а граница прозрачна, чем показывает фон под ней, и сливается с фоном ниже середины.

Поместите копию текстуры бумаги в верхнюю половину контекстной области. С помощью Hue/Saturation (CTRL+U) придайте ей сине серую расцветку.

CTRL+клик по слою с контекстной областью, чтобы загрузить выделение, инвертируйте выделение (CTRL+SHIFT+I) и нажмите delete. Также воспользуйтесь eraser tool для слияния текстуры с контекстной областью.

С помощью Pencil Tool нарисуйте горизонтальную линию в 1 пиксель белого цвета под заголовок.

Снова загрузите выделение контекстной области, затем зажмите ALT и с помощью Rectangular Marquee Tool отрежьте лишнее выделение, чтобы получилось как на рисунке. На новом слое залейте выделение градиентом от белого к прозрачному и измените opacity до 90%, придав блик заголовку.

С помощью Rectangular Marquee Tool нарисуйте боковую панель, которая перекроет основную область. Залейте выделение серым фоновым цветом (#eeeeee).

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

С помощью Outer Glow добавьте светло-серую границу, изменив Spread до максимума, что превратит свечение по умолчанию в твердую полосу цвета, который поможет добавить эффект двойной обводки.

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

Наконец, добавьте gradient overlay к боковой панели от белого к светло-серому фону для придания интереса и глубины.

Разделите боковую панель на отдельные секции, по плану каждый раздел меню располагается в отдельной секции.

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

Залейте выделение белым цветом, щелкните правой кнопкой мышки по слою с боковой панелью и выберите copy layer style. Щелкните правой кнопкой мышки по слою с белым окошком и выберите Paste layer style для быстрого добавления такого же эффекта границы.

Структура сайта почти готова, имитируем текстовые элементы страницы для тестирования цветов и размеров.

Создайте навигационную область с помощью создания маленького выделения и добавления бледного градиента к заголовку. Напишите название кнопок с помощью Text Tool.

Говоря о содержании будущего поста блога, вставьте информацию и измените цвет и размер текста для создания условной иерархии. Заголовок самый важный элемент, поэтому он должен быть большим и жирным. Там, где мета информация, это не очень важно, поэтому она может быть меньшего размера и более светлого цвета.

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

С помощью фантастического набора иконок (icon set from Function) добавьте второстепенную информацию такую, как счетчик комментариев и ссылку для прочтения всей статьи. Выделите их контекста, но дайте полезную информацию для посетителя.

Наконец, добавьте другие элементы страницы такие, как подписки. Иконку RSS можно найти, например в наборе free icon set.

Хорошее выделение информации, представленной на странице, придает ясность тому, на что будет похож вебсайт.


Просмотров: 7267

  Коментарии (1)
 1 Написал(а) Dimm, в 14:24 14.03.2012
Спасибо. полезная статья. Буду пробовать.

Добавить коментарий
Имя:
Коментарий:



Код:* Code

Реклама


Error. Page cannot be displayed. Please contact your service provider for more details. (19)