Создаем веб-дизайн на тему комиксов, Photoshop и HTML+CSS (Часть 1)

веб-дизайн

От автора: на этот раз я подготовил интересный учебник для любого уровня знаний. Здесь, в части 1, мы создадим очень оригинальную модель дизайна для фанатов комиксов. Мы «с нуля» сделаем разметку блога, а чтобы все выглядело потрясающе, воспользуемся несколькими приемами из Photoshop. Затем, в части 2, мы узнаем, как разделить его на слои, закодировать и подготовить для конвертации в блог по теме CMS. Вы готовы?

Детали учебника

Программа: Adobe Photoshop

Версия: CS5 (можно любую)

Сложность: Средняя

Примерное время выполнения: 3 часа


веб дизайн комикс

скачать исходники

Перед началом

Давайте начнем! Для быстроты изложения я опущу объяснение основ (вроде того, как создать слой-маску или отредактировать обработчики или векторную фигуру). Вам нужно иметь понятие о Слоях, Направляющих, Векторных масках и Слоях-масках, Кистях, инструменте Перо, и уметь работать с типографской разметкой текста (Символы и Параграфы).

Активы этого учебника:

Фигуры «солнечные лучи»

«Комиксовые» шрифты из Font Squirrel (Komika Title и Komika Text)

Первым шагом мы создаем макет, грубый рисунок, или даже просто набросок разметки на салфетке. Черновик структуры сайта позволяет легко разместить элементы дизайна. Ниже приведен простой набросок, показывающий следующие элементы:

Заголовок с логотипом, поисковой полосой и ссылками на социальные сети, кроме основной навигационной колонки.

Баннер с представленными постами – обратите внимание, как текст поста размещен поверх изображения в «словесном пузыре» (talk bubble) для подчеркивания «комиксового» стиля.

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

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

веб дизайн

Шаг 1: Устанавливаем документ

Откройте Photoshop, скачайте шаблон Photoshop’а 12 колонок из 960 Grid System или создайте новый документ в 960px и нарисуйте несколько Направляющих/Guides на левом и правом краях.

Увеличьте рабочую область, чтобы посмотреть, как она выглядит при более высоком разрешении, а также увеличьте высоту. Я устанавливаю размеры документа на 1420px ширины и 1200px высоты. Наконец перейдите на Слой/Layer > Новый слой-заливка/New Fill Layer > Плотный цвет/Solid Color…) и установите черный (#000000) фон холста.

веб дизайн

Шаг 2: Фон заголовка

Начертите горизонтальную Направляющую/Guide примерно в 450px от верхнего края, мы будет использовать ее в качестве Применив инструмент Прямоугольник/Rectangle, начертите широкий прямоугольник, воспользовавшись в качестве переднего фона этим цветом (#AA0001). Затем примените к прямоугольнику черно-белую Слой-маску с градиентом/Gradient Layer Mask для того, чтобы скрыть его нижнюю часть.

Подсказка: никогда не пользуйтесь Слоем с градиентом/Gradient Layer для фонов, потому что при увеличении высоты холста (обычная практика в веб-дизайне) фон искривляется.

фон заголовка

Шаг 3: Добавляем узор фона

Откройте из ресурсов Бумажный узор/Paper Texture, Скопируйте/Copy и Вставьте/Paste его над слоем с красным градиентом. Масштабируйте его для того, чтобы вместить в границы модели и измените Режим наложения/Blending Mode слоя на Линейный затемнитель/Linear Burn. Мы разложим его на слои как большое фоновое изображение, но для более высокого разрешения нам нужно сделать искусное соединение края бумаги с черным фоном, для этого при помощи инструмента Затемнение/Burn затемните области, близко расположенные к левому и правому краям бумажной текстуры. Можете использовать большую мягкую Кисть/Brush (0% Твердость/Hardness).

Правильно организуйте слои – положите оба слоя (Бумага/Paper и Прямоугольник/Rectangle) в папку под названием «Header Bg» (заголовок).

узор фона

Шаг 4: Солнечные лучи

Продолжим делать модель дизайна в стиле комиксов, давайте добавим несколько полос солнечного света для создания драматического фона логотипа.

Откройте формы "Sunburst" (солнечные лучи) из активов. В инструменте Произвольная форма/Custom Shape выберите свою любимую форму для солнечных лучей и нарисуйте их поверх слоя с красным градиентом. Поместите форму ближе к левому краю шаблона в 960 пикселей (чтобы видеть границы, покажите направляющие). Примените к слою "Sunburst" Слой-маску с радиальным градиентом/Radial Gradient Layer Mask (белую в центре и черную по краям). Измените Непрозрачность слоя/Layer Opacity на 50%. На выбор: используя неоднородную Кисть/Brush, порисуйте черным цветом поверх Слоя-маски/Layer Mask для создания слияния солнечного света и фона.

солнечные лучи

Шаг 5: Полутон/Halftone

Для усиления эффекта «комиксовости» стиля добавим по фону заголовка несколько пятен с Полутонами/Halftone. Создайте новый слой поверх "Sunburst" и воспроизведите там несколько черных и белых Облаков/Clouds (Фильтр/Filter > Воспроизвести/Render > Облака/Clouds). Затем перейдите в Фильтр/Filter > Оформление/Pixelate > Цветной полутон/Color Halftone. Измените Режим наложения/Blending Mode слоя "Halftone" (полутон) на Умножение/Multiply и добавьте в него Слой-маску/Layer Mask > Скрыть все/Hide All. Затем, используя большую и мягкую Кисть/Brush (цвет: белый, Непрозрачность/Opacity и …Заливка/Flow на 75%), нарисуйте несколько областей слоя-маски так, чтобы сделать видимыми только самую небольшую часть шаблона полутонов.

полутон

Шаг 6: Заголовок

Сейчас фон заголовка у вас уже готов, так что давайте добавим логотип. Сначала нарисуйте референтную направляющую примерно в 180 px под верхней границей, логотип не должен находиться под ней. Воспользуйтесь шрифтом "Komika Title" из активов, напишите заголовок сайта ("Comicastic"), размер шрифта/Font Size: 68pt, цвет фона переднего плана: #FFB401. Затем добавьте еще текстовых элементов, вроде восклицательных знаков или слоганов белого цвета (размер шрифта 16pt).

Затем при помощи инструмента Свободное трансформирование/Free Transform поверните текст на несколько градусов влево, чтобы он выглядел менее официально. Попробуйте в итоге получить нечто, похожее на изображение внизу, но помните о том, что нельзя размещать элементы ниже направляющей линии. В конце поместите все эти слои в папку с названием "Logo" (логотип).

заголовок

Шаг 7: Стили слоя с логотипом

Добавьте через Стиль слоя/Layer Style > …Наложение градиента/Gradient Overlay (#EA9403 – #FFC501) Обводка/Stroke (размер:1px, …Внутренняя/Inside, #FCB600) и …Тень/Drop Shadow (черный, 50% Непрозрачность/Opacity, Расстояние/Distance и Размер/Size: 2px) к слою логотипа "logo". Воспользуйтесь таким же стилем для слогана, но смените цвета Наложение градиента/Gradient Overlay на #EDEDED — #FFFFFF, а обводки – на белый (#FFFFFF). Если вы поместили в логотип восклицательный знак, можете попробовать преобразовать его в фигуру (Слой/Layer > Текст/Type > Конвертировать фигуру/Convert to shape) и немного исказить, как показано в самом низу изображения.

слой логотип

Баннер популярных постов

Шаг 8: Фон

Воспользуйтесь инструментом Закругленный прямоугольник/Rounded Rectangle (радиус 5px), чтобы нарисовать широкий прямоугольник через весь баннер ниже логотипа, как показано на изображении внизу, высоту прямоугольника выберите сами, я установил свою на 250px. Затем примените Наложение градиента/Gradient Overlay (цвета: #DA7E00 – #F0AD00, угол: 90°) и Обводка/Stroke (цвет: #F2AA00, размер: 1px, местоположение: внутри). Добавьте к нему Стили слоя/Layer Styles.

фон

Шаг 9: Изменяем верхний баннер

Примените инструмент Прямой выбор/Direct Selection (A) к своему новому прямоугольнику с закругленными углами, возьмите точки верхнего левого угла и сдвиньте их вправо (для аккуратного передвижения можно использовать курсоры). Затем сдвиньте правые нижние точки на несколько пикселей влево.

верхний баннер

Шаг 10: Добавляем контейнер для скользящей картинки

Теперь, используя инструмент Прямоугольник/Rectangle, нарисуйте серый прямоугольник внутри желтого баннера (примерно 630px на 250px), можно оставить нижнюю часть серого прямоугольника в нескольких пикселях от низа желтого баннера для создания эффекта out-of-bounds (за границами). Добавьте Обводку/Stroke (размер: 1px, местоположение: внутри, цвет: #FFFFFF) и Тень/Drop Shadow (цвет: #000000, непрозрачность:50%, расстояние: 0px, Рассеивание/Spread: 0px, размер: 5px) и попытайтесь разместить прямоугольник, как показано на изображении внизу. Наконец, положите оба слоя (серый и желтый прямоугольники) в папку с названием "Top Banner" (верхний баннер).

контейнер

Шаг 11: Основная навигация

Используя семейство шрифтов "Komika Text", впишите навигацию страницы справа вверху верхнего баннера, установите размер шрифта на 18px и цвет: #FFFFFF. Положите ее в папку под названием "Pages Navigation" (навигация страниц), убедитесь, что эта папка находится за "Top Banner" (верхним баннером). Затем с помощью инструмента Закругленный прямоугольник/Rounded Rectangle (радиус: 3px, цвет: #EFA800), нарисуйте прямоугольник прямо за первым словом навигации, назовите слой "Selected Tab" (выбранная закладка). Далее при помощи инструмента Прямой выбор/Direct Selection (A) сдвиньте точки внизу слева, как показано на изображении внизу. Далее примените к слою "Selected Tab" Наложение градиента/Gradient Overlay (цвета: #F0A900 – #FEBF00, угол: 90°). Если хотите, можете добавить к тексту навигации очень легкую Тень/Drop Shadow (цвет: #000000, непрозрачность: 25%).

навигация

Шаг 12: Добавляем изображения баннеров

Чтобы показать настоящий пример, вставьте в баннер любое изображение. Если изображение больше прямоугольника, можно использовать Обтравочную маску/Clipping Mask, для этого вставьте изображение поверх серого прямоугольника, затем Опции/Option / Alt – Щелчок между двух слоев, таким образом вы ограничите изображение прямоугольником, и обрезка не понадобится.

изображения баннеров

Шаг 13: Управление баннером

Выберите инструмент Произвольная фигура/Custom Shape и выберите одну из стрелок, нарисуйте пару штук – одну рядом с другой, обе указывающие влево. Затем Примените/Apply к обеим Наложение градиента/Gradient Overlay (#6D0004 – #980000) и Обводку/Stroke (размер: 1px, местоположение: внутри, цвет: #B20002). Положите оба указателя в папку с названием "Prev" (предыдущий) и, придерживая клавишу Command/Ctrl и используя Управление свободным трансформированием/Free Transform Controls, немного деформируйте стрелки. Затем скопируйте папку и переименуйте ее в "Next" (следующий), переместите вправо от баннера и перейдите в Правка/Edit > Трансформирование/Transform > Отразить по горизонтали/Flip Horizontal, чтобы изменить ее направление. Наконец, поместите обе папки "Next" и "Prev" в новую папку с названием "Controls" (элементы управления).

Управление баннером

Шаг 14: Эффект при проведении мышью

Теперь дублируйте папки "Next" и "Prev" и примените к стрелкам другой стиль слоя для создания эффекта при проведении над ними мышью. Я копирую Стиль слоя/Layer Style из восклицательного знака заголовка.

Эффект при проведении мышью

Шаг 15: Детали полутонов

Таким же образом, как в Шаге 5, создайте Слой полутонов/Halftone Layer над желтым баннером. Выбрав слой "Halftone" (полутон), нажмите Command/Ctrl – щелчок над желтым баннером, затем Command/Ctrl+Shift+I для предотвращения выбора, затем удалите выходящее за пределы. Измените Режим наложения/Blending Mode слоя "Halftone" на Наложение/Overlay и Непрозрачность/Opacity на 25%. Наконец, добавьте Слой-маску/Layer Mask > Скрыть все/Hide All и с помощью большой мягкой белой кисти порисуйте над несколькими областями слоя-маски для того, чтобы сделать видимыми лишь некоторые части шаблона.

Детали полутонов

Шаг 16: "Словесный пузырь" популярной статьи

Теперь пора добавить область для содержимого популярного поста. Для этого с помощью инструмента Произвольная фигура/Custom Shape поищите "словесные пузыри" с закругленными углами (Rounded Cornered) и Прямоугольный "словесный пузырь"/Rectangular talking bubble. Нарисуйте их поверх баннера "Featured Image" (основное изображение) и разместите справа, как показано внизу. До проектирования любых из этих свойств вам нужно провести небольшое исследование на тему, возможно ли достигнуть данного эффекта, даже если вы не знаете, как кодировать, то можете поискать существующие библиотеки Ajax (JQuery / MooTools) и посмотреть, что уже сделано и работает, а затем адаптировать свою модель к существующей библиотеке.

Затем, использовав инструмент Прямой выбор/Direct Selection (A), немного трансформируйте форму пузыря. Наконец примените Тень/Drop Shadow (цвет: #000000, непрозрачность: 25%, расстояние: 5px, Рассеивание/Spread: 0px, Size: 10px).

Словесный пузырь

Шаг 17: Текст популярного поста

Пора добавить к популярному посту заголовок и аннотацию. Для заголовка используйте "Komika Title", 18pt. #680001. Для текста воспользуйтесь "Komika Text Tight", размер: 16pt, цвет: #1B1B1B. Поместите слои текста прямо в центре, как показано на изображении внизу.

Текст популярного поста

Шаг 18: Блок для комментариев и мета-тэгов поста

Теперьсделайте другой пузырь, на этот раз меньшего размера, используйте в качестве фона переднего плана этот цвет: #9C0001 и определите стиль слоя Обводка/Stroke (цвет: #D00000, размер: 1px, расположение: внутри), как показано на изображении внизу, затем добавьте количество комментариев с помощью шрифта "Komika Title", цвет: #FFFFFF и размер: 24pt. И слово "Comments" (комментарии) шрифтом "Komika Title", размер: 12pt, цвет: #FFB301.

Наконец, добавьте маленький мета-текст под аннотацией поста шрифтом "Tahoma", размер: 10pt, цвет: #1B1B1B. Если для вставки мета-текста недостаточно места, можно использовать инструмент Прямой выбор/Direct Selection для увеличения высоты блока со «словесным пузырем» популярного поста.

Подсказка: никогда не трансформируйте элемент Векторный закругленный угол/Vector Rounded Corner с помощью инструмента Свободное трансформирование/Free Transform из Photoshop’а, так вы исказите угол, выбирайте точки, которые нужно сместить, при помощи инструмента Прямой выбор/Direct Selection, а затем сдвиньте их.

Блок для комментариев и мета-тэгов поста

Шаг 19: Фон заголовка популярного поста

Скопируйте фон пузыря популярного поста, скройте тень, измените цвет заливки на желтый (#FFC001) и Растрируйте/Rasterize его. Затем при помощи инструмента Выбор прямоугольной области/Rectangular Marquee Selection, выберите весь желтый пузырь под линией заголовка, потом Удалите/Delete отмеченное. Далее при выбранном слое "Bubble Title" (заголовок пузыря) добавьте линию рамки, нажмите Command/Ctrl над векторной маской "Bubble Background" (фон пузыря). Затем перейдите в Правка/Edit > Модификация/Modify > Contract и установите значение на 1px. Наконец, нажмите Command/Ctrl+Shift+I для инверсии выбора и удалите его.

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

Фон заголовка

Основное содержимое

Шаг 20: Фон контента

Теперь давайте займемся фоном основного содержимого: создайте папку с названием "Page Content" (содержимое страницы) и нарисуйте белый (#FFFFFF) Прямоугольник с закругленными углами/Rounded Corner Rectangle (радиус: 5 px) высотой в несколько пикселей (если изначальный размер холста становится к этому времени слишком маленьким, можно увеличить его размер, только убедитесь, что его верхняя граница находится на месте).

Фон контента

Шаг 21: Изображение для поста

Пора добавить на страницу содержимое, как это по умолчанию делается в блогах, создадим список последних постов.

Нарисуйте два квадрата (шириной примерно в 3 колонки) и поместите их, как на изображении внизу. Проделайте то же, что в Шаге 12 – добавьте несколько изображений над квадратами, используя их как Обтравочные маски/Clipping Masks. Наконец, выберите квадрат и определите ему стиль слоя Обводка/Stroke (цвет: #FFB801, размер: 1px, местоположение: внутри).

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

Изображение для поста

Шаг 22: Добавляем заголовки и категории постов

Нарисуйте два широких прямоугольника, один желтый (#F2AA00) и второй ниже – белый с желтой рамкой (#FFB401). Над желтой полосой напишите заголовок поста с помощью "Komika Title", цвет: #670003, размер: 18pt. А на белой полосе напишите названия категорий с помощью "Komika Text Tight" размер: 13pt, цвета: #212121 для ссылок и #670003 для положения, когда мышь убрана.

заголовки и категории постов

Шаг 23: Аннотация и мета-текст поста

Снова нарисуйте над картинкой и желтой полосой "словесный пузырь", сделайте заливку цветом: #333333 с обводкой в 1px (цвет: #6969690, а также примените Тень/Drop shadow, как мы делали до того на баннере. Затем добавьте образец текста аннотации с помощью "Komika Text Tight" размер: 14pt, цвет: #FFFFFF, пример мета-текста с помощью "Tahoma" 10pt цвет #979797, а если хотите, и линию между обоими текстами (#4B4B4B).

мета-текст поста

Шаг 24: Заканчиваем основное содержимое

Чтобы закончить этот раздел, добавьте "пузырь" с комментариями, повторяя в основном процесс из Шага 18. Затем разложите все по папкам; я называю папку с постом "A post". Затем продублируйте ее (Command/Ctrl+Перетаскивание/Drag) и разместите справа. Повторите то же самое с двумя или тремя строками поста, как показано внизу на изображении. Увеличьте высоту белого фона настолько, чтобы он подходил ко всему посту внутри.

основное содержимое

Шаг 25: Угол страницы с контентом

Чтобы усилить впечатление «комиксовости», мы добавляем простой «загиб» страницы белого фона внизу справа.

Сначала нарисуйте черный Треугольник/Triangle в нижнем правом углу (можно использовать инструмент Перо/Pen), затем продублируйте его и сдвиньте треугольник, сделав его "отражением" черного, можно залить эту копию любым отличающимся цветом. Далее деформируйте второй треугольник, сделав его немного волнистым. Затем примените к деформированному треугольнику Наложение градиента/Gradient Overlay с помощью красивой смеси цветов: (#9C0001 – #FE0000 – #9C0001) и измените угол в соответствии с углом загиба, в данном случае – 108 градусов. Далее с помощью Мягкой кисти/Soft Brush (черный, непрозрачность и заливка на 50%) нарисуйте несколько теней в новом слое за деформированным треугольником. Если хотите, добавьте к деформированному треугольнику несколько точек для закругления кончика, как показано в самом низу приведенного изображения. Наконец, сложите все связанные с загибом слои в папку с названием «Page Curl» (загиб страницы). Держите ее под рукой, потому что позже мы будем ею пользоваться.

Угол страницы с контентом

Шаг 26: Фон нижнего колонтитула

Мы почти закончили, сначала создаем папку с названием "Footer" (нижний колонтитул) и убедимся, что она находится под папкой "Page Content" (содержимое страницы), внутри нее рисуем красный (#9C0001) круг, затем применяем Гауссово размытие/Gaussian Blur радиусом по меньшей мере в 65px. Затем трансформируем полученный размытый круг так, чтобы он подходил к ограничивающим направляющим.

Фон нижнего колонтитула

Шаг 27: Фоновый солнечный свет

Теперь с помощью инструмента Произвольная фигура/Custom Shape выберите одну из фигур солнечного света и нарисуйте ее в середине черной, затем снизьте непрозрачность до 50%. Потом добавьте шаблон полутонов над красным мерцающим кругом, скройте его с помощью слоя-маски, а покажите только некоторые его части. Наконец, снизьте непрозрачность красного круга до 50%.

Фоновый солнечный свет

Шаг 28: Фон содержимого нижнего колонтитула

Мы добавим в нижний колонтитул обычные элементы блога, такие как категории и архив.

Теперь сделаем фон для элементов нижнего колонтитула, нарисуйте Закругленный прямоугольник/Rounded Rectangle (радиус: 5px) цвет:#1A1A1A шириной примерно в 3 колонки и установите значение его Заливки/Fill на 50%. Можете создать еще копии, чтобы он подошел к 4 блокам нижнего колонтитула.

Фон содержимого нижнего колонтитула

Шаг 29: Фон содержимого нижнего колонтитула — загиб

Выберите первый прямоугольник (тут уже можно удалить остальные). Затем продублируйте папку "Page Curl" (загиб страницы) и поместите ее внутри папки "Footer", измените ее так, чтобы она подходила к нижнему правому углу прямоугольника, затем измените цвета градиента на другие оттенки серого. Наконец, добавьте слой прямоугольника к стилю Обводка/Stroke (1px, внутри, #242424).

Фон содержимого нижнего колонтитула

Шаг 30: Категории

Теперь добавьте название раздела, в данном случае это «Категории» "Categori", с помощью "Komika Title", размер: 14px цвет: #F2AA00. Используйте направляющие для того, чтобы определить отправную линию заголовка, сделайте их по меньшей мере в 20 px ниже окончания фона страницы с содержимым. Затем добавьте несколько строк как образцы категорий, используя "Komika Text Tight", размер: 16px, цвет: #FFFFFF, и красный (#EC000A) в качестве цвета для эффекта проведения мышью. Как дополнительную характеристику эффекта проведения мышью добавьте маленькую желтую (#FFB301) стрелку с помощью инструмента Произвольная фигура/Custom Shape. Сложите все слои в папку с названием "Footer Element" (нижний колонтитул).

Категории

Шаг 31: Дублируем раздел нижнего колонтитула

Продублируйте папку "Footer element" и сдвиньте ее вправо, измените на этот раз слова на «Архив» ("Archives").

Затем снова продублируйте папку, но на этот раз увеличьте полупрозрачный фон и сделайте его в два раза шире, вверху напишите названия для "Popular Posts" (популярные посты), "Latest Posts" (последние посты) и "Recent Comments" (последние комментарии), для первого примените желтый цвет, а для двух остальных – серый. Как вы догадались, это та же функциональность, что и у панели с закладками. Затем добавьте маленький желтый треугольник, чтобы отмечать выбранную закладку.

колонтитул

Шаг 32: Содержимое панели с закладками

Так как этот раздел будет состоять преимущественно из списков постов, давайте их добавим, в основном это комбинация шрифтов "Komika Title" и "Komika Text Tight" разных цветов (смотрите скриншот ниже). Первая строка станет образцом выбранного (проведением мышью) пункта, тут за текстом добавьте черный (#000000) прямоугольник с закругленными углами и слой-маску Горизонтальный градиент/Horizontal Gradient (черно-белый).

Наконец, добавьте внизу этого раздела маленький указатель страниц.

Содержимое панели с закладками

Шаг 33: Поисковое поле

Пора добавить несколько заключающих штрихов. Давайте начнем с области поиска. Создайте папку с названием "Search Bar" (поисковое поле) поверх всего, создайте Закругленный прямоугольник/Rounded Rectangle (радиус: 3px, цвет: #000000 с эффектом Обводки/Stroke размером в 1px, расположение: внутри, цвет: #7C0000) в качестве поля для ввода и маленький прямоугольник для кнопки поиска; скопируйте Стиль слоя/Layer Style выбранного пункта основной навигации и вставьте его в кнопку поиска. Для получения настоящей кнопки белым цветом напишите поверх нее слово "Go!" (поиск) и примените ту же Тень/Drop Shadow, что в тексте основной навигации (повторное использование стилей слоев экономит множество времени). В поле ввода напишите слово "Looking for something"(ищу чего-нибудь), применив "Komika Text Tight" цвет: #F9A600.

Затем за всеми слоями внутри "Search Bar" (поискового поля) добавьте Прямоугольник/Rectangle, залейте его темно-красным цветом #380001 (заливка: 50%) и примените Обводку/Stroke, взяв этот цвет: #890101. Конвертируйте все в Смарт-объект/Smart Object и примените к нему Слой-маску/Layer Mask > Скрыть все/Hide All, закончите маску отраженным черно-белым градиентом для создания эффекта, показанного внизу на изображении.

Поисковое поле

Шаг 34: Иконки социальных сетей

Повторите процесс создания фона поискового поля, но на это раз используйте поле меньшей высоты и со слегка измененным цветом Обводки/Stroke (#860001). Затем напишите "Follow us" (следуйте за нами) с помощью "Komika title" и вставьте все нужные вам иконки, можно использовать мини-иконки из активов. Не забудьте разложить слои по папкам.

Иконки социальных сетей

Шаг 35: Навигация нижнего колонтитула и информация о копирайте

Для окончания работы на сегодня давайте добавим навигацию нижнего колонтитула. Определите границы раздела с помощью белой линии, скрытой под маской отраженного черно-белого градиента. Напишите ссылки навигации шрифтом Arial, размер 10px, цвет: #515151 и выделите эффект проведения мышью желтым цветом: #F2AA00. Затем добавьте текст копирайта, выровняв его справа.

Навигация нижнего колонтитула

Шаг 36: Вот и все!

В конце дважды проверьте, что все слои находятся в соответствующих папках.

слои

Автор: Alvaro Guzman

Источник: http://webdesign.tutsplus.com/

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Хотите научиться создавать шикарные дизайны сайтов?

Получите бесплатную пошаговую обучающую систему по веб-дизайну

Получить

Метки: , ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (28)

  1. SISTEM

    Красиво, мне нравится

  2. Николай

    Спасибо! Интересный дизайн! Важно — всё очень подробно и дотошно расписано…))

    • Виктор Рог

      Скоро дадим и верстку всего этого!

      • Алексей

        Спасибо за урок!
        Интересно будет на верстку глянуть. Судя по всему сайт на основе этого дизайна получится довольно «тяжелый» за счет большого количества графических элементов.
        PS: как быть если заголовок статьи не будет умещаться в 1 строку (для русского языка это актуально)?

  3. Vladimirovna

    Огромное спасибо за урок!!! Мне сегодня повезло,я как раз искала что-то подобное, был у меня ряд вопросов по этой теме, и..вот рассылка и урок! Приступаю к изучению!

  4. Vladimirovna

    Жду верстку! Будет вообще супер))Спасибо Вам!

  5. Виктор Рог

    Как только переведем и отрецензируем, сразу дадим в рассылку.

    Поэтому внимательно следите за новостями.

  6. Александр

    Да! И мне очень понравился дизайн. Ждем, когда будет кодинг. Если бы еще сразу под WordPress кодинг сделали) цены бы вам, ребята не было! :)

  7. Сергей

    Молодци ребята.Огромную и полезную работу проделали!!!!

  8. Анатолий

    Большое спасибо! Отличный урок. появились интересные идеи)

  9. Quatrod

    Вообще отличный шаблон, просто супер. А вы покажете как этот шаблон на WordPress прикрутить (другими словами как какую-то существующую тему так изменить).

    • Александр

      Поддерживаю! Вы же, ребята не новички в кодинге. Думаю прикрутить этот дизайн на WordPress для Вас не есть проблема. Может как-нибудь сделаете отдельный урок по прикручиванию дизайна на WordPress? Уверен, многие Ваши читатели будут — ЗА! :)

  10. Санников Николай

    Классный дизайн и очень все грамотно расписано! Еще бы видео-уроком вообще бы супер было.

  11. Владимир

    Большое спасибо за урок! Очень содержательный получился. Хорошая разметка для блога получилась. Сейчас попробую применить для своей темы.

  12. Надежда

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

  13. Эдуард

    Познавательно!
    Доступно!
    Красиво!
    Спасибо!!!
    Ждём продолжения!

  14. Отец Виктор

    Отличный урок, огромное спасибо!

  15. Olga

    Спасибо,классный урок,СУПЕР!!!

  16. Василий

    Я восхищаюсь Вами….ВЫ молодец !!! И Ваши рассылки прекрасны по содержанию и очень поучительны.

  17. Валерий

    Все хорошо, но почему нет форума?

  18. Александр

    Я восхищаюсь Вами….ВЫ молодец !!! И Ваши рассылки прекрасны по содержанию и очень поучительны.

  19. Galust

    Большое спасибо ! Если бы еще прикрутить к WP, то бесценно стало бы :-) )) С уважением, Галуст

  20. евгений

    Отлично! Я в Вас не ошибся.Продолжаем работать

  21. Александр

    Красавец сайт получается, хочется самому научится делать похожие …. А раз хочется, значит научимся!

  22. VLADIMIR

    Большое спасибо.Очень полезная и содержательная информация.

  23. Веди

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

    пи.. пи.. пи…

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree