От автора: чего вы прежде всего хотите от своего сайта-портфолио? Чтобы он выделялся! Сегодня Пол Дж. Нобл (Paul J Noble) проведет нас по этапам создания своего собственного сайта-портфолио с уникальным дизайном. Он покажет нам подсказки и приемы Adobe Photoshop’а, а также несколько разумных подходов к его выделению из огромного количества подобных сайтов.
Детали учебника
Программа: Adobe Photoshop
Версия: CS4
Примерное время выполнения: 1 час
Создание запоминающегося сайта-портфолио
Думайте о сайте-портфолио как о своем представителе перед лицом потенциальных клиентов. Тщательно сделанный, он должен рассказать людям о том, чем вы занимаетесь, показать ваши лучшие работы и дать им возможность связаться с вами. Это все очевидно – тогда в чем же разница между обычным сайтом-портфолио и на самом деле запоминающимся сайтом?
Разгадка создания эффективного сайта-портфолио – не в больших проектах – она в произведении впечатления на посетителей. Конечно, это могут быть великолепные иллюстрации, если вы графический дизайнер – но для веб-дизайнеров и разработчиков это часто значит необходимость расширения границ UI/UX и кодирования ради того, чтобы показать свои самые сильные стороны.
В этом учебнике Пол Дж. Нобл (Paul J Noble) собирается показать нам на примере собственного сайта, как он применил простые, но отличающиеся новаторством подходы к UI/UX для создания превосходящего ожидания пользователя портфолио, используя интерактивность и легкие световые эффекты.
Давайте примемся за него!
Шаг 1. Холст
Создайте в Photoshop новый документ размером в 1400 x 900px. Окончательный, визуализированный HTML сайт получит в качестве отличительной черты «резиновые» (т.е. масштабируемые) элементы, так что нам следует помнить о том, что окончательная модель будет не фиксированного размера.
Шаг 2. Разметьте основу
Создание устойчивого фона – это легкий способ начать работу. Для этой модели мы будем использовать основной цвет, достаточно темный для подчеркивания изображений переднего плана, и в то же время смещенный чистый черный, который может оказаться в изображениях портфолио. Мы также включим немного размытия для создания «прохладного» темного цвета, который объединится с элементами интерфейса.
Выбрать слой/Select Layer > Новая заливка слоя/New Fill Layer > Плотный цвет/Solid Color и назначьте цвет #252a3b.
Шаг 3. Разметка направляющих
Так как мы пользуемся масштабируемой разметкой, то нужно определить минимальную ширину по горизонтали. Для большинства коммерческих сайтов это примерно 1000 px, чтобы приспособиться к пользователям с дисплеями разрешением 1024×768. Однако для этого сайта мы установим как минимальную ширину 1100 px.
Сначала убедитесь, что элементы ваших направляющих установлены на пиксели. Это можно определить, зайдя в Установки/Preferences > Единицы измерения и линейки/Units & Guides.
Затем зайдите в Вид/View > Новая направляющая/New Guide. Так как мы собираемся расположить контент в центре и сделать минимальной общую ширину в 1100 px, то следует разместить вертикальный направляющие на 150px и 1250px.
Шаг 4. Создайте текстурный узор
Тонкие диагональные линии помогут сделать дизайн модели тоньше путем создания разделения между элементами портфолио переднего плана и текстурным фоном.
Чтобы добиться этого, мы применим слой с заливкой Узор/Pattern. Однако сначала нужно создать узор.
Создайте новый документ 12×12 px с прозрачным фоном и добавьте новый фон с черной заливкой (#000000).
Теперь добавьте новый слой (Слой/Layer > Новый/New > Слой/Layer). При помощи инструмента карандаш с размером кисти 1px начертите три линии в точности так, как они выглядят на изображении внизу.
Выключите заливку и установите непрозрачность слоя с линиями на 6%. Чтобы сохранить его в качестве узора выберите Правка/Edit > Определить узор/Define Pattern.
Вернувшись к исходному холсту, создайте новый слой с узором, выбрав Слой/Layer > Новый слой-заливка/New Fill Layer > Узор/Pattern и выберите ранее определенный узор.
Шаг 5. Навигация
Теперь, когда создана основа, можно сделать несколько плоских слоев, заключающих главные элементы сайта.
Сначала навигация. Так как этот сайт создается без вертикальной прокрутки, мы можем разместить навигацию, выровняв ее по низу экрана.
Создайте новую Группу/Group в панели слоев и назовите ее ‘Navigation’ (навигация).
Затем создайте новый слой, применив инструмент Прямоугольник/Rectangle Tool (U). Открыв окно информации (Info), начертите эту фигуру размером 1400×61 (общая ширина окна документа и 61 px в высоту). Выровняйте этот слой внизу окна документа.
Теперь примените градиент, щелкнув правой кнопкой мыши на слой фигуры в панели слоев (Layers) и выбрав Параметры наложения/Blending Options, а затем отметьте галочкой Наложение градиента/Gradient Overlay (в качестве альтернативного варианта выберите Слой/Layer > Стиль слоя/Layer Style > Наложение градиента/Gradient Overlay).
В Редакторе градиентов/Gradient Editor щелкните селектор цвета низа, чтобы открыть Выбор цвета/Color Picker. Для цвета левого края (низ фигуры) используйте #2f313a. Для цвета правого края (верх фигуры) используйте #3c3f49.
Далее создайте новый слой и назовите его ‘highlight’ (выделение). С помощью инструмента Карандаш/Pencil с кистью 1px и цветом #ffffff начертите линию через верх предварительно созданного прямоугольника, придерживая shift. Затем установите непрозрачность этого слоя на 6%.
Шаг 6. Логотип
Создайте новый текстовый слой в 20 px от левой стороны документа и выровняйте текст вертикально по центру прямоугольного слоя с навигацией.
В этом примера применен шрифт DIN Light 14px со свободным трекингом (межбуквенным расстоянием) в 200. Для создания сдвига между двумя частями логотипа используются два шрифта. Для первой части — #dddddd, а для второй, более темной части — #737375.
Далее добавьте легкую тень для создания внешнего вида текста, вставленного в фон. Выберите Слой/Layer > Стиль слоя/Layer Style Отмените выбор ‘Use Global Light’(использовать глобальное освещение), измените направление на -45 градусов, установите размер на 0px, расстояние 1px и непрозрачность 30%.
Шаг 7. Кнопки навигации
Для кнопок основной навигации мы используем форму прямоугольника с закругленными углами.
Создайте новую группу с названием ‘buttons’ (кнопки).
Создайте новую фигуру Закругленный прямоугольник/Rounded Rectangle 279×31, сдвиньте на 20 px от правой стороны окна документа и выровняйте по вертикали в прямоугольнике с навигацией.
Щелкните правой кнопкой мыши по слою в панели слоев и выберите Параметры наложения/Blending Options. Отметьте галочкой Наложение градиента/Gradient Overlay и примените значения от #292c33 до #43464f. Щелкните OK, а затем отметьте Тиснение/Bevel & Emboss.
Для Тиснения/Bevel & Emboss установите размер на 0px с направлением в 122 градуса. Затем установите непрозрачность Подсветки/Highlight и Тени/Shadow на 10% для создания стойкого легкого эффекта подсветки.
Добавьте текстовые данные с помощью тех же самых установок шрифта, которые применялись для логотипа. Так как тексты кнопок находятся в меньшем вертикальном пространстве, нам нужно уменьшить размер до 12 px и сжать трекинг до 100. Примените те же цвета, что и для логотипа, однако для названия активной страницы возьмите более яркий цвет.
Для выделения кнопок при мягко подсвеченном внешнем виде навигации нам нужно начертить две линии, каждая шириной в 1px. Первая должна быть черной (#000000), а вторая белой (#FFFFFF). Установите непрозрачность белого слоя на 6%, а черного – на 12%. Продублируйте эти слои, нажав Shift и щелкнув на каждый, затем щелкните правой кнопкой на выбранный слой. Расположите продублированные слои в навигации с равными интервалами.
Шаг 8. Кнопки социальных сетей
Функция этих кнопок отличается от остальной навигации, так что мы применим подразумевающий это стиль. Давайте установим их в дополнение к основной навигации.
Сначала создайте новую группу с названием ‘social’ (социальные) и поместите ее в родительскую группу ‘navigation’ (навигация).
Теперь при помощи инструмента Закругленный прямоугольник/Rounded Rectangle с радиусом 4 px, придерживая клавишу shift, создайте квадратную фигуру 25×25 px. Разместите ее по вертикали в центре навигации и в 22 px слева от кнопок основной навигации.
Щелкните правой кнопкой мыши на только что созданную фигуру и выберите Параметры наложения/Blending Options.
Добавьте тень. Для нее мы применим белый цвет (#FFFFFF) и установим режим смешивания на Замена светлым/Lighten. Установите расстояние на 1px, разброс на 0% и размер на 0px. Таким образом вы создадите эффект подсветки нижнего края и отсюда эффект вставленной кнопки.
Далее в том же окне Стиль слоя/Layer Style отметьте внутреннюю тень. Примените черный цвет (#000000) с непрозрачностью в 39%, расстоянием 1px и размером 4px.
Наконец, выберите Наложение цвета/Color Overlay и используйте #353741. Так вы разгладите внешний вид фигуры и добавите контрастности с фоном.
Для иконок социальных сетей мы возьмем существующее изображение и начертим границы, применив инструмент Перо для создания контура (убедитесь, что в меню опций (Options) выбраны Контуры/Paths).
После создания контура иконки примените инструмент Выбор контура/Path Selection и щелкните правой кнопкой мыши на только что созданный контур (убедитесь, что контур выбран из панели Контуров/Paths). Выберите Определить произвольную фигуру/Define Custom Shape… Сохранить фигуру/Save the Shape.
Теперь мы можем использовать иконку как масштабируемый векторный объект. С помощью инструмента Перо/Pen измените Опции/Options слоев фигуры (верхний левый пункт в колонке опций) и выберите инструмент Произвольная фигура/Custom Shape, затем выберите только что созданную иконку. Придерживая клавишу Shift, перетащите объект так, чтобы он поместился в фрагмент изображения иконки.
Установите непрозрачность иконки на 20%.
Повторите эти шаги для всех остальных иконок социальных сетей.
Шаг 9. Еще направляющие
В этом примере мы собираемся показать изображения из портфолио размером 640×480 px.
Так как нам хотелось бы выровнять демонстрируемое изображение по вертикали в области над навигацией, то нужно добавить еще несколько направляющих. Выберите Вид/View > Новая направляющая/New Guide и Добавить/Add горизонтальные направляющие на 180px и 660px. Так мы расположим показываемые изображения посередине пространства над навигацией по вертикали.
Нам также нужно немного текста слева от демонстрируемого изображения, так что добавляем вертикальные направляющие на 400px и 350px для обеспечения поля для текста и места для навигации к следующему изображению. Наконец, добавьте вертикальные направляющие на 1040px и 1070px для установления края просматриваемого изображения и поля между смежными изображениями.
Шаг 10. Создайте «заполнители» изображений
Создайте новую группу с названием ‘Projects’ (проекты). Затем при помощи инструмента Прямоугольник/Rectangle начертите прямоугольник 640x480px, который выравнивается вверху в 400px слева от вертикальной направляющей и вверху в 180px от горизонтальной направляющей. Он послужит в качестве «заполнителя» для нашего основного изображения.
Щелкните на только что созданный слой правой кнопкой мыши и выберите Растеризовать слой/Rasterize Layer.
Теперь, придерживая кнопку Alt, щелкните и перетащите слой для создания дубликата. Сдвиньте его в правую сторону слоя с полем в 30px, чтобы выровнять по направляющей 1070px, и используйте ту же базовую линию.
Создайте еще два дубликата и выровняйте их по низу каждого с полем между ними в 30px.
Затем, применив инструмент Ведро/Paint Bucket, залейте каждую из этих форм цветом #252a3a.
Шаг 11. Виньетка
Создайте новую группу с названием ‘Vignette’ (виньетка) под группой ‘Navigation’ (навигация) и выше группы ‘Projects’ (проекты).
Создайте новый слой и примените инструмент Ведро/Paint Bucket для заливки слоя при помощи цвета переднего плана #0f1219.
С помощью инструмента Эллипс/Ellipse нарисуйте абрис, пересекающий по углам направляющие основного изображения.
Теперь для создания эффекта виньетки нам понадобится обрезать эту область при одновременной растушевке ее края. Чтобы этого добиться, мы используем Выбрать/Select > Модификация/Modify > Растушевка/Feather. Растушуйте выборку на 60px, а затем обрежьте выбор слоя (Ctrl-x / Command-x).
Шаг 12. Создайте маски проекта
Так как нужно выставлять работу в наиболее выгодном свете, нам понадобится разместить в «заполнителях» несколько скриншотов. Вернитесь к группе ‘Projects’ (проекты) и вставьте скриншот, выбрав при этом основной «заполнитель». Так вы вставите слой поверх него. Затем щелкните правой кнопкой по слою и выберите Создать обтравочную маску/Create Clipping Mask.
Вставьте еще три скриншота в другие «заполнители».
Уменьшите непрозрачность всех скриншотов, кроме расположенного по центру, до 20%.
Шаг 12 Вставка текста
Для аннотации каждого проекта мы используем три текстовых слоя. Создайте для их размещения новую группу поверх группы ‘vignette’ (виньетка).
Для первого слоя, заголовка, мы применим светлый шрифт. В этом примере я использовал DIN Light, однако другой похожий вид шрифта тоже может подойти. С помощь инструмента Текст/Text перетащите текстовый блок в направляющие влево от основного изображения и на 40px ниже верхней направляющей. Установите цвет на #FFFFFF, трекинг на -25 для более плотного межбуквенного интервала и используйте размер шрифта 28px.
Мы, кроме того, добавим строку категории проекта и даты. Установите размер на 14px, трекинг на 100, нажмите caps и примените цвет #338966 для того, чтобы подчеркнуть эту строку.
Далее в тексте основы мы будем использовать системный шрифт, такой как Lucida Grande или Lucida Sans Unicode 12px с цветом #8C8F95 и высоту строки 18px.
Шаг 14. Добавьте управление мышкой
Для навигации своего сайта-портфолио мы сделаем управление мышью или с клавиатуры. Интуитивное размещение направленных кнопок навигации производится согласно их функции. Например, кнопка со стрелкой вправо будет справа от основного изображения.
Для кнопок мы применим полупрозрачные формы, меняющие непрозрачность при проведении над ними мышью или событии щелчка. Создайте новую группу с названием ‘Buttons’ (кнопки) над группой ‘Vignette’ (виньетка).
Затем создайте новый документ с разрешением 37x37px. С помощью инструмента перо начертите форму шеврона, как внизу. Повторяя процесс Шага 8, при помощи инструмента Выбор контура/Path Selection щелкните правой кнопкой мыши по форме и выберите Определить произвольную форму/Define Custom Shape. Сохраните фигуру.
Перейдя к основному холсту, используйте инструмент Произвольная фигура/Custom Shape, чтобы вставить предварительно созданную фигуру.
Затем выберите Правка/Edit > Трансформирование/Transform > Отразить по горизонтали/Flip horizontal. Так вы развернете стрелку вправо. Скопируйте эту фигуру и используйте Правка/Edit > Трансформирование/Transform > Поворот на 90 градусов по часовой стрелке/Rotate 90 degrees Clockwise для создания фигуры, указывающей вниз.
Разместите все эти фигуры в центре их соответствующего направления. Предусмотрите поле в 15px, чтобы кнопки могли частично перекрывать смежные изображения и снизьте непрозрачность до 12%.
Шаг 15. Карта ориентирования
Чтобы пользователь мог видеть, где он в общем находится в портфолио, мы извлечем сетку модели и используем линии различной высоты для представления колонок с изображениями и индикатора для определения текущего положения просмотра.
Создайте новую группу с названием ‘Orientation’ (ориентирование) и разместите ее над группой ‘Vignette’ (виньетка).
При помощи инструмента Карандаш/Pencil выберите Квадратную кисть/Square brush, установленную из меню fly-out. Затем при помощи цвета #FFFFFF и толщины в 5px начертите линию высотой 60px, выровненную по направляющей дальнего левого края.
Скопируйте этот слой и разместите его в 2px справа. Повторите то же самое и создайте до 12 линий.
Установите непрозрачность всех слоев на 12%. Это легко сделать, установив непрозрачность для первого слоя, затем щелкнуть правой кнопкой мыши и выбрать Скопировать стиль слоя/Copy Layer Style. Затем выбрать все оставшиеся слои и Вставить стиль слоя/Paste Layer Style.
Расположите эти слои в шахматном порядке с помощью команды Правка/Edit > Свободное трансформирование/Free Transform для уменьшения/увеличения каждой линии.
Наконец, создайте новый слой и снова примените карандаш, чтобы нарисовать на первой линии маркер. Это – индикатор местоположения.
Шаг 16. Управление с клавиатуры
Часто управление с клавиатуры предлагает интуитивное использование навигации. Однако мы должны дать пользователю понять, что с клавиатуры тоже можно управлять. Для выполнения этой задачи создадим иконки со стрелками клавиатуры.
Создайте новую группу с названием ‘Keyboard’ (клавиатура) и разместите ее над группой ‘Vignette’ (виньетка).
С помощью инструмента Прямоугольная фигура/Rectangle Shape начертите квадрат (придерживая Shift) 20x20px с цветом #262a34. Щелкните правой кнопкой мыши на панель слоев/Layers и выберите Параметры наложения/Blending Options. Найдите Обводку/Stroke и примените снаружи обводку в 1px цветом #32343f.
Затем при помощи инструмента перо (убедитесь, что в панели опций стиль установлен По умолчанию/Default) цветом #fff нарисуйте стрелку со слегка квадратным острием. Отрегулируйте так, как вам нужно с помощью инструмента Прямой выбор/Direct Selection. Установите непрозрачность на 20%.
В панели слоев, придерживая shift, выберите два только созданных слоя. Щелкните правой кнопкой мыши и выберите Дублировать слои/Duplicate layers. Затем с помощью опции меню Правка/Edit > Трансформирование/Transform вращайте дублированные слои до их правильного расположения. Повторите тот же шаг для создания всех четырех иконок.
Заключение
Отлично! Сейчас мы закончили раздел моделирования своего проекта… значит, все, что осталось сделать – это закодировать его при помощи основного HTML/CSS, jQuery Hotkeys и нескольких дополнительных приемов jQuery. Если кто-то хочет увидеть, как Пол кодировал свою модель, дайте об этом знать в комментариях, чтобы мы смогли все организовать!
Автор: Paul J Noble
Источник: //webdesign.tutsplus.com/
Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
Комментарии (62)