Разработка семейства веб-сайтов

По большей части веб-дизайн не совсем о технике Photoshop, поэтому всегда сложно написать учебник Photoshop по этому вопросу. Еще сегодня я собираюсь познакомить вас с дизайном, который я недавно собрал. Мы пройдем несколько шагов Photoshop, и я попытаюсь наполнить вас некоторыми аргументами моих действий.

Вы можете найти файлы Photoshop PSD в каталоге с надписью «PSD», которые вошли в загруженный вами ZIP-файл. Вы можете просмотреть их кратко, прежде чем мы начнем.

Во-первых, окончательные проекты

Сначала взгляните на проекты. Я пишу книгу на тему WordPress под названием «Как стать дизайнером WordStress Rockstar». В книге потребовалась следующая тема примера, поэтому я разработал ту, которую я называю «Креатив», потому что это звучит по-французски и как-то круто. В принципе, это набор дизайнов, которые мы будем строить в двух темах WordPress - один из них является обычным блогом, а один - темой, которая позволяет использовать WordPress для создания портфеля.

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

Ниже приведены экраны:

1. Домашняя страница для темы «Портфолио креатива»
2. Домашняя страница Creatif блог темы
3. Общая страница содержимого для
4. Альтернативная цветовая схема, которую мы построим в сменную таблицу стилей - чтобы вы могли поменять их и получить темную или легкую версию любой темы.

Цветовая палитра

Одним из моих первых решений при разработке нового сайта является выбор цветовой палитры. Есть несколько хороших сайтов, чтобы помочь вам выбрать хороший набор, но часто я просто придумываю свои собственные, экспериментируя. Простая формула, которую я иногда использую, - это выбрать набор нейтральных оттенков и один цвет подсветки, чтобы поднять палитру. В этом случае я выбрал красивую серо-голубую цветовую палитру с действительно ярким голубым цветом, как мой цвет подсветки.

Шаг 1

Мы начинаем учебник с небольшого логотипа. Хотя дизайн логотипа, как правило, сложный процесс, в этом случае я просто хочу, чтобы небольшая графика привязывала мою страницу. Поэтому я пропустил весь обычный процесс и просто сделал небольшой текстовый логотип. Если вас интересует дизайн логотипа, отличный блог на эту тему - логотип Design Love от David Airey, и в Faveup, конечно же, можно найти хорошую галерею логотипов.

Во всяком случае, я выбрал шрифт News Gothic Condensed Bold. Я думаю, что это шрифт Mac по умолчанию, но я не уверен, когда я устанавливаю шрифты bazillion везде, куда бы я ни пошел. Я использовал простой стиль слоя (для которого вы можете увидеть настройки на следующем шаге), что делает тип выглядящим как web2 и модным. Он использует слабый градиент, тонкую тень и границу 1px, чтобы снять тип с страницы.

Шаг 2

Ниже приведены параметры для стиля слоя:

Шаг 3

Затем я добавил закругленный прямоугольник за текстом. Вы можете создать это с помощью Rounded Rectangle Tool (U). Как вы можете видеть на изображении ниже, я добавил слабый градиент к коробке. Вы можете сделать это, нажав CTRL, щелкнув слой, чтобы выбрать его пиксели,выбрав «Выбрать»> «Изменить»> «Контракт» и «Контрактинг» на 1 пиксель, а затем на новом слое, нарисующем «Радиальный градиент» из более светлой версии темного цвета и затухания до прозрачности.

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

Шаг 4

Теперь холст, который я использую здесь, составляет около 1100 пикселей в ширину x 1400 пикселей. На самом деле весь контент находится в пределах 1000 пикселей, чтобы он отображался на экране 1024 x 768. Мне нравится иметь более широкий холст, чтобы я мог планировать, что происходит, когда зритель имеет большее разрешение.

На этом шаге я добавил основы моего заголовка, а именно темную полосу вверху, более темный оттенок цвета фона в качестве панели меню, линию 1px для закрытия строки меню и некоторый подтекст под моим логотипом ( в News Gothic Condensed снова).

Следует отметить две вещи:

1. Всегда приятно использовать оттенки вашей цветовой палитры. Здесь у меня цвет фона, панель меню, элементы меню и подтекст логотипа - все разные, более темные оттенки этого цвета. Это дает приятное, гладкое, не противоречивое чувство. Конечно, если вы используете только оттенки, становится довольно скучно, вот почему мы представляем наш цвет подсветки немного позже. Различные стили дизайна потребуют большего изменения цвета, но в нашем случае мы хотим, чтобы в основном сочетались оттенки и оттенки с одним сильным оттенком.
2. Кроме того, приятно отразить ваш цвет в вашем дизайне. Итак, у нас есть бежевый цвет фона, а затем наш темный цвет появляется в трех местах: логотип, верхняя панель и выделенная ссылка меню. This creates a visual balance and alignment between the three elements. Balance is important.

Шаг 5

Здесь мы добавляем первый бит нашего цвета выделения. Это действительно тонкая линия 1px вдоль вершины. Позже, когда мы добавим больше элементов, цвет подсветки снова появится в разных местах, и эти элементы будут объединены, чтобы объединить их в единый, гладкий дизайн. Поскольку для этого дизайна не так много, кроме хорошо размещенных элементов и цвета, очень важно правильно раскрасить.

Шаг 6

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

Важно помнить, что вам нужно позже построить этот проект в HTML. По этой причине вы заметите, что к тому времени, когда вы доберетесь до края видимой области размером 1000 пикселей, мы вернемся к монотонным цветам. Это означает, что позже я смогу создать один фрагмент изображения и использовать его в качестве фонового изображения CSS. Тогда у меня будет другое фоновое изображение с большой областью выделения, и это будет фоновое изображение в основном теле контента.

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

Шаг 7

Затем пришло время начать добавлять мою первую белую область содержимого. Здесь я использовал контур 1px более темной версии цвета фона, затем внутреннюю границу 1px и, наконец, слабый бежевый градиент, идущий вниз. Этот стиль соответствует моему более раннему логотипу. Кроме того, имея более темный контур, а затем более легкую внутреннюю схему, мы получаем очень резкий взгляд на страницу. Резкость происходит от контраста, т. Е. От темного к свету.

Лично я считаю, что четкость или ясность действительно важны в веб-дизайне. Ничто не раздражает меня больше, чем отсутствие внимания к деталям, делая вещи ясными и четкими.

Шаг 8

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

В Photoshop рекомендуется настроить Anti-Aliasing на «Sharp», чтобы подражать тому, как текст будет выглядеть в браузере. Раньше я использовал «None», но в наши дни большинство компьютеров и всех Mac используют этот отличный материал ClearType, чтобы шрифты выглядели гладкими.

Еще раз обратите внимание, что в подтекстовых ссылках используется наш синей подсветки, набирая линию заголовка 1px, которую мы добавили ранее.

Шаг 9

Затем я добавил небольшой элемент дизайна в виде полосы сообщений в правом верхнем углу моего окна. В простом дизайне, таком как это (где это в основном простые строки и коробки), приятно иметь один или два элемента, которые действительно выпрыгивают. подсветки в сочетании с углом 45 ', чтобы сделать классный элемент, который выглядит потрясающе.

Поэтому мы рисуем прямоугольник и добавляем текст поверх вершины. Затем я использовал инструмент Dodge Tool (O), чтобы осветлить среднюю часть, и добавил стиль слоя, чтобы придать тексту немного тени. Затем, выбирая оба слоя вместе, я нажимаю CTRL-T для преобразования и поворота 45 '.

Шаг 10

Поместив его поверх моего ящика, я отрезал края, как показано. Теперь вы заметите, что мы могли бы разместить его так, чтобы он был выровнен с полем, но я подумал, что было бы неплохо сделать так, чтобы эта полоса обертывалась вокруг коробки, так что это примерно 4 пикселя.

Шаг 11

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

Шаг 12

Затем я продублировал свою обертку и повернул ее на 90 ° и поместил ее также в правую сторону коробки, как показано. И вуаля, наш элемент дизайна!

Шаг 13

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

Шаг 14

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

Шаг 15

Теперь, когда я создаю тему WordPress, я также решил создать версию своего логотипа, которая может быть создана с использованием обычного текста. Вы можете увидеть его ниже, и в HTML-компоненте этого урока мы создадим этот «логотип».

Шаг 16

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

Шаг 17

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

Затем мне пришлось отключить темно-коричневый слой и подумал, что это выглядит просто здорово на светлом цвете. Это то, что называется счастливой случайностью. Хотел бы я сказать, что я был достаточно умен, чтобы нести ответственность за всю мою работу, но, откровенно говоря, половина из них - просто удача.

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

Шаг 18

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

Выводы 

Как я уже упоминал в начале этого урока, речь идет не столько о технике Photoshop. Реальность - это веб-дизайн, который часто использует только самые простые методы заполнения блоков цвета. Этот дизайн больше касается выбора цветов и оттенков, шрифтов, а затем принятия решения о том, как выложить все это. Надеюсь, вы получили что-то из этого процесса.

Создание в HTML

Конечно, разработка сайта в Photoshop - это только одна часть задания веб-дизайна. Следующий шаг - превратить дизайн в HTML.