Подготовка графики с помощью ImageReady

ImageReady - компонента известного графического редактора фирмы Adobe - Photoshop. Возможности этой компоненты следующие:

Разрезание готового макета сайта и оптимизация отдельных фрагментов.

Создание анимированных GIF-изображений.

Создание карт-ссылок на основе изображений.

Главное окно программы ImageReady очень похоже на окно Photoshop, но имеет ряд особенностей. Это и несколько специальных инструментов на панели инструментов и дополнительные палитры:



Разрезание готового макета

Предположим, вы создали макет вашего сайта в программе Photoshop и сохранили его в формате .psd. Для того, чтобы перенести его в HTML, вам понадобится разрезать ваш макет на отдельные фрагменты. Сделать это аккуратно и поможет ImageReady.

Откройте ваш подготовленный макет в программе ImageReady:



В данном случае требуется разрезать макет по направляющим на 7 фрагментов. Для этого на панели инструментов возьмем инструмент ножик (Slice Tool):



Теперь подведем курсор мыши в верхний левый угол нашего макета, нажмем на левую клавишу мыши (курсор примет вид ножика) и, не отпуская, растянем рамочку до нижнего правого угла первого фрагмента:



Теперь таким же образом выделим и остальные фрагменты:



Теперь нужно настроить параметры оптимизации, для этого выберем вкладку 2-Up. Это позволит нам одновременно видеть оригинал и оптимизированное изображение.



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

В открывшемся окне, кроме места куда сохранить, нужно указать также:

- имя файла - имя для фрагментов. Например, если задать имя img, то фрагменты будут называться img_01.gif, img_02.gif и т.д.

- тип файла - если выбрать Images Only (*.gif), то сохранятся только фрагменты. Если выбрать HTML and Images (*.html), то кроме картинок будет создан html-файл c автоматически сгенерированной таблицей для фрагментов (т.е. уже готовая страница).



Жмем сохранить. Готово. ImageReady создал папку images с набором заданных фрагментов.

Параметры оптимизации

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

Параметры оптимизации можно настроить в палитре Optimize (Оптимизация).После выбора формата файла вид панели меняется и становятся доступны параметры оптимизации под конкретный формат.



Параметры сохранения GIF:

Color table - таблица цветов:
Reduction - способ выбора цветов из изображения в палитру (perceptual - цвета, к которым наиболее восприимчив человеческий глаз, selective - предпочтение отдается цветам, которые чаще всего встречаются в оригинале, adaptive - только те цвета, которые превалируют в оригинале).
Colors - количество цветов, которое будет выбрано.
Dither - параметры сглаживания:
Method - указывает как будут замещаться цвета изображения, не попавшие в таблицу цветов (diffusion - диффузия, наиболее приближен к оригиналу; pattern - узор, отсутствующие цвета заменяются "узором" пикселов, имеющихся в таблице цветов; noise - шум, узор пикселов менее заметен).
Amount - степень сглаживания. Чем сильнее сглаживание, тем больший диапазон цветов может передать изображение (оптимально - 75%).
Transparency - прозрачность:
Установите флажок, если нужно сохранить прозрачность.
Matte - позволяет выбрать цвет фона, если он был прозрачным.
Options- режимы.
Параметры сохранения JPEG:



- Quality - качество. Доступны качественные значения (low - низкое, medium - среднее, hight - высокое) и количественные.

- Transparency - прозрачность.

- Options- режимы.

Этапы оптимизации

1. Открываете любое изображение в ImageReady.

2. Выбираете подходящий режим просмотра (например, 2-Up или 4-Up), чтобы сразу видеть результат ваших действий.

3. Настраиваете параметры оптимизации.

4. Когда размер файла и качество вас устраивают, сохраняете его с помощью команды меню Save Optimized As.

Источник: www.site-do.ru

Добавлено: 03 Мая 2015 09:26:54 Добавил: Андрей Ковальчук

Подготовка макета сайта

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

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

Любая web-страница состоит из разных объектов: текста, картинок, системы навигации и т.д. И все эти объекты надо расположить на странице так, чтобы ими было удобно пользоваться посетителям. Именно поэтому первым делом надо определить структуру макета, т.е. разбить его на структурные части.

На самом деле, вы сами можете придумать эту структуру, но есть основные виды:



Опираясь на них, продумайте свою структуру. Теперь откройте программу photoshop и создайте новый файл размером 800 Х 600 пикселов. Теперь опустим направляющие, деля ими макет на структурные элементы по выбранной выше схеме.

Если у вас не отображены линейки, то выберите в меню: Просмотр -> Линейки или нажмите Ctrl+R. Чтобы опустить направляющую подведите курсор мыши к верхней линейке, нажмите левую клавишу мыши и тащите направляющую вниз. Так можно опустить сколько угодно направляющих. Аналогично подведите курсор мыши к левой линейке, нажмите левую клавишу мыши и тащите направляющую вправо.

У меня получилось вот так:



Направляющие опущены условно, лишь для ориентира. Когда макет будет готов, мы их подвинем, а может и добавим новые.

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

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

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

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

Теперь вспомним, что на сайте должны обязательно присутствовать следующие элементы:

- Название компании и логотип, если это сайт фирмы
- Слоган
- Система навигации

Учитывая все вышеизложенное, приступайте к работе.

У меня, например, получилось так:



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

При нарезке следует помнить, что однотипные элементы следует сохранять в виде маленьких кусочков и использовать их при верстке, как фон. Так например в моем примере, можно выделить следующие части и сохранить их отдельно для последующего использования (помечены красным):



Насчет фрагмента 2. Как известно, существует два вида дизайна сайтов: фиксированный и резиновый. Фиксированный дизайн страницы остается неизменным независимо от монитора пользователя. При резиновом дизайне страница растягивается и занимает все свободное место окна браузера.

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

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

Источник: www.site-do.ru

Добавлено: 07 Апреля 2015 22:56:53 Добавил: Андрей Ковальчук

Цвета для web

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

Для этого в компьютерном дизайне чаще всего используют цветовую модель RGB. В ее основе лежат три цвета: red - красный, green - зеленый, blue - синий. С помощью смешивания этих трех цветов можно получить почти весь видимый спектр.

Для указания RGB-цвета в HTML используется шестнадцатеричная система счисления. Начинается код цвета со спецсимвола # (что и указывает на шестнадцатеричный код), а далее следует шесть символов. Первые два отвечают за количество красного оттенка, третий и четвертый за насыщенность зеленого, а пятый и шестой - синего. Так, #FF0000 - красный цвет, #00FF00 - зеленый, #0000FF - синий, а #FFFFFF - белый.

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

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

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



Установим галочку "только web-цвета" и, щелкая по палитре, подберем нужный нам цвет. Затем запомним (или скопируем) код цвета внизу окна (рядом со знаком решетки - #) и можем использовать его в наших html-страницах.

Источник: www.site-do.ru

Добавлено: 07 Апреля 2015 22:28:37 Добавил: Андрей Ковальчук

3D шар с текстурой

Для начала нарисуйте круг, затем при помощи Ctrl+D сделайте его дубликат.
Нижний круг залейте желаемой текстурой, а тот, что сверху, сделайте черным.
Расположите оба круга точно один под другим (в этом вам поможет Arrange в верхнем меню). Важно, чтобы черный круг находился сверху. Сделайте контур обеих фигур невидимым.



Возьмите инструмент Interactive Transparency и в верхнем меню выберите тип прозрачности Radial. Чтобы придать шарику объем, расположите направляющую также, как на рисунке.



Для украшения вы можете добавить тень при помощи инструмента Interactive Drop Shadow.

Добавлено: 18 Сентября 2013 04:05:37 Добавил: Андрей Ковальчук

Создание макета сайта в минималистичном западном стиле

Вот результат, к которому мы будем стремиться:



Для начала определимся в рамках стиля, что следует использовать:

1. Порядок и чистота в шапке сайте. Отдельно логотип, отдельно меню:



http://myrainbownursery.co.uk/



http://www.getballpark.com/

2. Минимальное использование цветов и градиентов:



http://www.hathaciudad.it/

3. Максимализм в заголовках и текстах:



http://fixx.sg/

4. Силуэтность в иллюстрациях:



http://piccsy.com/investors/



http://www.hathaciudad.it/

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

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

Примеры использования:

http://www.getballpark.com/
http://piccsy.com/investors/

Часть 1. Создание документа. Работа с первой страницей

Вот макет-набросок нашей первой страницы(салатовым показана шапка с логотипом и меню, голубым – изображения, а розовым – текстовые блоки)



Шаг 1. Создание документа, разбивка направляющими. Начало работы с первой страницей. Фон

Создаём холст размером 1000х3150(С учетом четырех страниц высотой по 700, и футера высотой в 350)



Сразу же проставляем направляющие, отделяющие страницы друг от друга: 700, 1400, 2100 и 2800 по горизонтали(Просмотр – Новая направляющая..)



Советую установить красный цвет направляющих, чтобы они не сливались с нашим будущим фоном.(Редактирование – Установки – Направляющие, сетка и фрагменты)



Далее, создаём новый слой. Выделяем область первой страницы (до первой направляющей) с помощью инструмента ‘Прямоугольная область’





Нам нужно залить эту область нужным цветом. Для этого, меняем цвет переднего плана



на #00e5c8



И используем инструмент ‘Заливка’





Кроме этого, выставим центральную вертикальную направляющую, она нам тоже пригодится:





Шаг 2. Работа с шапкой

Наша шапка будет высотой в 70 пикселей, сразу создадим направляющую для наших целей:



Выделим шапку. Для этого, создаём новый слой и выделяем нашу будущую шапку с помощью инструмента ‘Прямоугольная область’



Далее, устанавливаем белый цвет переднего плана и используем инструмент ‘Заливка’(на новом слое!).



Добавим тень под шапку. Копируем слой, на котором мы сделали заливку шапки белым, и располагаем его под слоем-оригиналом



(назвать слой можно через пункт ‘Параметры слоя’ в меню слоя).

Снимаем выделение (Выделение – Отменить выделение (Ctrl+D)). Вызываем диалог работы с тоном и насыщенностью (Изображение – Коррекция – Цветовой тон/Насыщенность (Ctrl+U)). Значение яркости устанавливаем на -100



Это окрасило слой в черный цвет, для естественности тени. Работаем дальше с дубликатом слоя. Применяем размытие по Гауссу (Фильтр – Размытие – Размытие по Гауссу) с радиусом в 24 пикселя.



Тень готова:



К шапке мы еще вернемся для вставки логотипа и меню

Шаг 3. Центральная часть

Расставим направлящие для иконок и текста. Иконки(размером 170х170) горизонтально располагаются в центре левой половины, вертикально – с отступом в 60 пикселей от меню и 100 пикселей друг от друга. Текст – в правой половине, от центра всей страницы.



Располагаем иконки(находятся в материалах для урока, /images/1balloon.png и 2cake.png) в отсеках, образованных направляющими(Файл – Поместить..):





Создаём текст для каждой иконки с помощью инструмента ‘Горизонтальный текст’ (предварительно установив цвет переднего плана – Белый)





Включаем диалог ‘Символ и абзац’ на панели настройки текстового инструмента



Устанавливаем настройки для текста: MS Sans Serif, 34 пт, трекинг AV 120:



Кроме этого, на вкладке ‘Абзац’ убираем галочку ‘Переносы’



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



Чтобы выделить текст, применим стили к текстовым слоям. Для этого, в меню слоя выбираем пункт ‘Параметры наложения’, откроется окно ‘Стиль слоя’. В списке стилей выбираем ‘Тень’ и применяем её с такими настройками, как на скриншоте:



Итог:





Шаг 4. Возвращаемся к шапке. Размещение логотипа и меню

Наш логотип имеет размер 30х30(его вы можете найти в материалах для урока /images/ 3logo-balloon.png). Расставим для него направляющие:



И поместим сам логотип:



Добавим текстовый слой с названием компании(Arial 12, цвет #777777, трекинг AV 120):



Далее, создаём еще один текстовый слой, для меню, от центральной направляющей (Arial 12, черный, трекинг AV 120):



Создадим индикатор активного пункта меню. Создаём новый слой. С помощью инструмента ‘Прямоугольная область’ выделяем тонкую полоску, над направляющей под меню:



Устанавливаем цвет переднего плана #c9c9c9 и с помощью инструмента ‘Заливка’ окрашиваем выделение:



Поверх этой полоски созадём новое выделение, шириной чуть более трети слова ‘Главная’:



Устанавливаем цвет переднего плана #02a792 и заливаем выделение. Меню готово:



Шаг 5. Окончание работы с первой страницей. Добавление скролла

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

Подскажем пользователю, что нужно делать, для этого добавим снизу страницы стрелочку(материалы к уроку, /images/4-arrow.png).

Сначала, направляющие для стрелки:



Теперь, помещаем картинку на холст(Файл – Поместить..):



Работа с первой страницей закончена!



Часть 2. Работа со второй страницей

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

На картинке внизу показано примерное расположение блоков. Сделано грубо, но поможет нам не потеряться среди направляющих. Голубым показаны изображения(280х100 пикселей), розовым – текстовые блоки



Шаг 1. Направляющие

Расставляем направляющие(Просмотр – Новая направляющая..):

Горизонталь:

770– верхняя граница блоков

870 – нижняя граница изображений 1 ряда

895 – верхняя граница текстовых слоёв 1 ряда

995– нижняя граница 1 ряда

1045 – верхняя граница 2 ряда

1145 – нижняя граница изображений 2 ряда

1170 – верхняя граница текстовых слоёв 2 ряда

1270 – нижняя граница блоков

Вертикаль:

40 – начало первого столбца (уже проставлена в прошлой части урока)

320 – конец первого столбца

360 – начало второго столбца

640 – конец второго столбца

680 – начало третьего столбца

960 – конец третьего столбца





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

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

Шаг 2. Размещение элементов

Сначала размещаем изображения(находятся в материалах к уроку, /images/article-birth.png, article-corporate.png, article-kids.png, article-mcfly-special.png, article-prom.png, article-wedding.png) с помощью меню ‘Файл-Поместить..’



Под изображениями, располагаем текстовые блоки(инструмент ‘Горизонтальный текст’) с такими настройками: шрифт MS Sans Serif, размер 13, трекинг AV 120.

Выделяем полужирным нужные нам слова (названия мероприятий):





Смотрится ровно, симпатично. Остаётся завершить работу над второй страницей, снова разместив стрелочку-подсказку (в материалах к уроку, /images/cyan-arrow.png)

Вертикальные направляющие для неё уже имеются, разместим горизонтальные: 1334 и 1374



Теперь, помещаем стрелочку на страницу:



Работа над второй страницей завершена:



Часть 3. Работа с третьей страницей

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



Шаг 1. Направляющие

Расставим направляющие:

Горизонталь:

1470 – верх блоков

1590 – низ первой строки

1660 – верх второй строки

1780 – низ второй строки

1850 – верх третьей строки

1970 – низ блоков

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



Шаг 2. Фон

Заливаем фон цветом #00e5c8. Для этого, создаём новый слой. С помощью инструмента ‘Прямоугольная область’ создаём выделение для страницы:



Далее, устанавливаем цвет переднего плана #00e5c8



И с помощью инструмента ‘Заливка’ окрашиваем страницу



Шаг 3. Заполнение страницы текстом

Создаём текстовые слои для этих областей:



Настройки текста: шрифт MS Sans Serif, размер 120, цвет белый(также, рекомендую «поиграться» с настройкой ‘Задайте метод сглаживания’ в правом нижнем углу панели настроек текста). На вкладке ‘Абзац’ выставляем параметр ‘Выключка текста вправо’





Далее, создаём текстовые слои для этих областей, регулируя размер слоя так, чтобы текст ‘прижимался’ к нижней части области:



Настройки текста: шрифт MS Sans Serif, размер 40, цвет белый. На вкладке ‘Абзац’ – выключка текста влево



Добавляем всё тот же эффект тени, что добавляли в первой части урока(для текстовых слоёв в правой части страницы). Вызываем окно ‘Стиль слоя’, нажав ‘Параметры наложения’ в меню слоя.



На вкладке ‘Тень’ вводим такие настройки, как на скриншоте:



Проделываем это для всех трёх слоёв в правой части страницы





Шаг 4. Стрелочка скролла

По традиции, добавляем подсказку-стрелку на страницу. Вертикальные направляющие для этого есть, вводим горизонтальные: 2034, 2074



Стрелочку берем в материалах к уроку, /images/4-arrow.png, и помещаем её в область, образованную направляющими:



Часть 4. Работа над четвертой страницей и футером

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

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

Примерный макет будущей страницы (голубым – изображение, розовым – текст и форма заказа, салатовым – кнопка отправки):



Примерный макет футера(розовым – текст для поисковых систем, голубым – логотип создателей сайта):



Шаг 1. Подготовка

С помощью инструмента ‘Заливка’ окрасим футер в цвет #00e5c8(от нижней направляющей до конца холста), предварительно создав новый слой. Это поможет нам визуально различать четвертую страницу:



Далее, создадим новый слой для окрашивания четвертой страницы в белый цвет. «Нелогично», – скажете Вы. Но нужно этого для того, чтобы сделать тень.

После того, как страницы окрашена, созадём дубликат этого слоя (располагаем в списке под оригиналом и над футером), и применяем к нему ‘Изображение – Коррекция – Цветовой тон / Насыщенность’ с параметром Яркости -100:





После этого, применяем к дубликату ‘Фильтр- Размытие – Размытие по Гауссу’ с радиусом в 24 пкс.:



Как видим, тень образовалась и сверху слоя. Обводим простым выделением и удаляем кнопкой Del:



Примечание: как видите, тень можно сделать несколькими способами, не используя встроенные стили



Шаг 2. Направляющие

Горизонталь:

2240 – верхушка заголовка

2380 – начало текстовых полей(имя, телефон, и т.д.)

2403 – конец первого поля для ввода текста

2420 – начало второго поля ввода

2443 – конец второго поля ввода

2460 – начало третьего поля ввода

2483 – конец третьего поля ввода

2500 – начало четвертого поля ввода

2523 – конец четвертого поля ввода

2610 – верхняя граница кнопки

2670 – низ кнопки



Шаг 3. Размещение элементов и текста

Помещаем(Файл – Поместить..) изображение из материалов к уроку(/images/balloon-big.png) в эту область:





Далее, помещаем заголовок(«Оформление заказа») в данную область:



Настройки текста: шрифт MS Sans Serif, размер 40, трекинг AV 120, цвет #00e5c8, выключка по левому краю:



Теперь, зальём поля ввода. Сначала используем инструмент ‘Прямоугольная область’, чтобы выделить нужные нам участки(для многократного выделения, следует задать клавишу Shift):



Создаём новый слой. С помощью инструмента ‘Заливка’ окрашиваем области, предварительно установив цвет переднего плана #f1f1f1:



На следующем этапе, размещаем текстовый слой в области:



Настройки текста: шрифт MS Sans Serif, размер 17, цвет #777777, интерлиньяж – 40 пт, выключка по правому краю:



Осталось разместить кнопку отправки заявления. Работаем с этой зоной:



Сначала, заливаем её на новом слое цветом #00e5c8(инструменты ‘Прямоугольная область’ и ‘Заливка’):



Далее, создаём текстовый слой со следующими настройками: шрифт MS Sans Serif, размер 40, цвет белый, выключка по центру





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

Шаг 4. Работа с футером

Размещаем горизонтальную направляющую: 2870, это будет верхняя граница текстового блока.



Параметры текста: шрифт MS Sans Serif, размер 12, цвет белый, интерлиньяж – Авто, выключка по левому краю:



Горизонтальная направляющая: 2980. Под ней мы разместим логотип создателей сайта. Изображение есть в материалах к уроку(/images/copyright.png), либо возьмите свой логотип





Работа над макетом завершена. В ходе урока мы много времени уделили работе с направляющими и выравниваю элементов; познакомились на учебном примере с одним из способов реализации западного минималистичного стиля.

Свои комментарии и вопросы по уроку вы всегда можете оставить в форме внизу.

Добавлено: 17 Сентября 2013 04:43:58 Добавил: Андрей Ковальчук

Создаем «чистый» интерфейс коммерческого вебсайта в Photoshop’е

Конечный продукт, который мы создадим:



Прежде всего, хочу отдать должное Сунилу (Sunil), который фактически создал этот интерфейс. Я сделал несколько модификаций макета, таких как его реорганизацию согласно сетке.

Сделайте эскиз своей идеи

«Пусть ваши наброски будут свободными и примерными»

Прежде чем перейти прямиком к Adobe Photoshop, нужно сначала уделить время раздумьям над тем, как сделать структуру своего проекта. Давайте возьмём ручку и бумагу и начнём зарисовывать каркас.

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

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

К сожалению, так как я не делал этот макет «с нуля», нет возможности показать вам скриншот с эскизом каркаса. Но скажу одно: пускай ваши наброски будут свободными и примерными. Им не нужно быть причудливыми или высокохудожественными.

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

Для дальнейшего чтения:

18 Great Examples of Sketched UI Wireframes and Mockups

Why Sketching And Wireframing Ideas Strengthens Designs

Создание каркаса в серых тонах

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

Вот как окончательно должен выглядеть чёрно-белый каркас:



Разметка: Композиция

Перед началом работы над каркасом в Adobe Photoshop’е нам нужно принять несколько решений.

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



Разметка: Сетка

Использование сетки облегчает выравнивание элементов и выбор их размера. В этом проекте мы применим Сетку базовых линий, созданную потрясающими ребятами из Teehan+Lax. Это сетка из 6px-ных базовых линий, соединенная с 960 grid system.

Для дальнейшего чтения:

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

Designing Faster with a Baseline Grid

Разметка: Белое пространство

Белое, или негативное пространство – это промежутки между элементами интерфейса. Пространство между основными элементами называют белым макропространством. Белое микропространство – это незаполненные промежутки между такими элементами, как пункты списка, пустое место между заголовком и изображением, или пространство между словами и символами.

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

Типографская разметка текста: Гарнитуры

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

Для дальнейшего чтения:

A Beginner’s Guide to Pairing Fonts

How to Choose a Typeface

What Font Should I Use?: Five Principles for Choosing and Using Typefaces

Choosing the Right Font: A Practical Guide to Typography on the Web

Choose your web fonts wisely

On Choosing Type

В своем интерфейсе мы используем три следующих гарнитуры: Helvetica – «чистую» и современную, этим всё сказано; Georgia – вызывающую королевские ассоциации и задающую серьёзный тон гарнитуру; Bebas – гарнитуру авторитетную и, подобно жирному шрифту, всегда уместную.

Helvetica Neue: Основной текст (стандартный шрифт).

Bebas: Заголовки (Загрузите здесь).

Georgia: Другие элементы заголовков (стандартный шрифт).

Типографская разметка текста: Иерархия

“Иерархия разметки текста” просто описывает, как различные шрифты, типы начертания и размеры структурируют документ.

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

24px: заголовки H1.

18px: заголовки H2.

14px: H3 и заголовки навигации.

12px: Основной текст — со значением межстрочного интервала 18px.

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



Что касается типа начертания, то я возьму символы от строчного Roman до жирных строчных. Ничего сложного.

Типографская разметка текста: Межстрочные и межзнаковые интервалы и трекинг

Как я уже говорил, мы применим значения межстрочных интервалов в зависимости от сетки, что составит 18px и 21px.

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

Для дальнейшего чтения:

Metrics versus Optical Kerning

Типографская разметка текста: Сглаживание

Вот действительно отличная статья. Вы обязаны ее прочесть! Я не скажу ничего, кроме того, что для основного текста (маленькие размеры точек) мы используем метод сглаживания Sharp, а для заголовков (большие размеры точек) применим Crisp.

The Ails Of Typographic Anti-Aliasing

Шаг 1: Создание документа

Когда уже приняты какие-либо решения, пора запустить Adobe Photoshop и фактически начать создавать каркас! Итак, откройте заранее скачанный документ сетки, который называется “grid2.psd”. Первое, что мы сделаем – выделим все слои документа, кроме папки с названием “Marks”, и избавимся от них, или сгруппируем их в папку и пока скроем. Прежде чем продолжить, давайте выберем папку “Marks” и нажмём в панели слоев кнопку Закрепить все (Lock All).



Теперь нужно изменить высоту документа, так как наш окончательный дизайн проекта выше существующего документа. Выберите Изображение (Image) > Размер холста (Canvas Size), измените высоту на 1540px и удостоверьтесь, что установили Точку привязки/узловую точку (Anchor) вверху по центру.



Затем откройте Просмотр (View) > Вспомогательные элементы (Extras), чтобы просмотреть направляющие, Линейки (Rulers), чтобы открыть для просмотра линейки, и Захват (Snap) для привязки создаваемых нами объектов к направляющим).



Шаг 2: Создание фона

Мы начнём с фона. Создайте новый слой, назовите его (например, “bg”), затем выберите инструмент Прямоугольная область (Rectangular Marquee Tool) (M). Выделите весь холст и нажмите Shift+Backspace для заливки, Применить: Цвет (Use: Color), затем сделайте заливку, установив значение цвета #f5f5f3. Обратите внимание, что значения применяемых нами в черно-белом каркасе цветов неокончательны, а использовать их мы станем для различения элементов страницы.



Шаг 3: Создание верхней панели

Теперь давайте создадим верхнюю панель. Снова выберите инструмент Прямоугольная область (Rectangular Marquee Tool) (M), сделайте выделение размером 1260x45px и залейте его цветом #2d2d2d.



Выберите Горизонтальный текст (Horizontal Type Tool) (T), напишите элементы навигации, затем примените к ним следующие настройки символов.

Font (шрифт): Helvetica Neue LT Std.

Weight (начертание): 55 Roman.

Size (размер): 12px.

Kerning (межзнаковый интервал): Metrics.

Color (цвет): #767676.

Anti-Aliasing (метод сглаживания): Sharp.



Чтобы убедиться, что наш текст выровнен относительно фона правильно, выберите оба слоя (слой с текстом и слой с фоном) и нажмите на панели параметров Выравнивание центров по вертикали (Align vertical centers).



Шаг 4: Создание поля входа

С помощью инструмента Горизонтальный текст (Horizontal Type Tool) (T) напечатайте слово «Вход» (“Sign In”),примените к нему следующие настройки и обязательно выровняйте, как показано на изображении внизу.

Font (шрифт): Helvetica Neue LT Std.

Weight (начертание): 75 Bold.

Size (размер): 12px.

Kerning (межзнаковый интервал): Metrics.

Color (цвет): #ffffff.

Anti-Aliasing (метод сглаживания): Sharp.



Теперь давайте создадим поля ввода данных. Используя инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool) (U), создайте две фигуры, каждая размером 127x26px, с радиусом угла 15px. Залейте их цветом #767676 и выровняйте, как на изображении внизу.



Внутри этих полей напишите слова: «Имя пользователя» (“User name”) и «Пароль» (“Password”), применив к ним следующие настройки шрифта, затем выровняйте их согласно изображению ниже.

Font (шрифт): Helvetica Neue LT Std.

Weight (начертание): 55 Roman.

Size (размер): 12px.

Kerning (межзнаковый интервал): Metrics.

Color (цвет): #ffffff.

Anti-Aliasing (метод сглаживания): Sharp.



Кнопку «Войти» (“Go”) мы создадим с помощью инструмента Прямоугольник со скруглёнными углами (Rounded Rectangle Tool) (U), но теперь фигура будет размером 33x25px с радиусом углов в 25px. После этого внутри нее напечатайте слово «Войти» (“Go”), применив те же настройки, что на предыдущем изображении, но изменив начертание шрифта на 75 Bold (полужирный).

Выберите инструмент Линия (Line Tool), нарисуйте вертикальную линию 1x25px и залейте её белым цветом. Теперь напишите слово «Зарегистрироваться» (“Sign Up”), используя нижеуказанные настройки символов, затем выровняйте согласно изображению все созданные нами в этом шаге элементы.



Шаг 5: Создание рекламной области

Используя инструмент Прямоугольная область (Rectangular Marquee Tool) (M), создайте выделение 480x60px, залейте его цветом #767676 и выровняйте, как на изображении внизу. Оно станет местом для размещения рекламы.



Теперь назначим этому слою Обводку (Stroke). На изображении ниже показаны нужные нам настройки.



Шаг 6: Создание логотипа

Собственно, наш логотип не должен делаться в Adobe Photoshop, но пока что мы создадим его здесь. Так, выберите инструмент Эллипс (Ellipse Tool) (U), создайте круг размером 60x60px, залейте его цветом #2d2d2d, и выровняйте, как показано на следующем изображении.



Напечатайте букву “F”, назначьте следующие параметры и выровняйте ее так, как показано на изображении:

Font (шрифт): Avant Quelombre.

Size (размер): 53.65px.

Color (цвет): #ffffff.

Anti-Aliasing (метод сглаживания): Crisp.



Затем напечатайте слово «Мода» (“Fashion”) со следующими настройками:

Font (шрифт): Avant Quelombre.

Size (размер): 30px.

Kerning (межзнаковый интервал): Optical.

Color (цвет): #2d2d2d.

Anti-Aliasing (метод сглаживания): Sharp.

Убедитесь, что вы расположили их согласно изображению ниже:



Шаг 7: Создание панели навигации

На этом этапе мы создадим панель навигации. Выберите инструмент Прямоугольная область (Rectangular Marquee Tool) (M), выделите область размером 940x48px, залейте её цветом #c3c3c3 и опустите на 20px ниже области рекламы, как на изображении ниже.



Идём дальше. Выберите Горизонтальный текст (Horizontal Type Tool) (T) и напечатайте названия страниц-подразделов, используя следующие настройки:

Font (шрифт): Bebas.

Weight (начертание): Regular.

Size (размер): 14px.

Kerning (межзнаковый интервал): Optical.

Color (цвет): #2d2d2d/#ffffff.

Anti-Aliasing (метод сглаживания): Crisp.



Теперь давайте отделим созданные нами сейчас заголовки. Используя инструмент Линия (Line Tool) (U), проведите между заголовками по вертикальной линии, залейте их цветом #b4b4b4 и убедитесь, что оставили по 20px между каждым заголовком и линией.



Шаг 8: Создание выпадающего меню

А давайте теперь создадим выпадающее меню? Выберите инструмент Прямоугольная область (Rectangular Marquee Tool) (M), выделите пространство между двумя линиями, окружающими слово «Женщины» (“WOMEN”), и залейте его цветом #2d2d2d. Затем создайте другое выделение размером 340x147px, залейте тем же цветом и отцентрируйте, как на изображении внизу. Оно послужит фоном нашего выпадающего меню.



Нажмите на клавиатуре кнопку (T), чтобы выбрать инструмент Горизонтальный текст (Horizontal Type Tool) (T) и начните печатать элементы подменю, используя следующие настройки символов:

Font (шрифт): Helvetica Neue LT Std.

Weight (начертание): 55 Roman.

Size (размер): 12px.

Kerning (межзнаковый интервал): Metrics.

Leading (межстрочный интервал): 30px.

Color (цвет): #767676.

Anti-Aliasing (метод сглаживания): Sharp.

Наконец, убедитесь, что всё выровнено как на следующем изображении.



Сейчас мы создадим рамку для изображения (где разместим женскую фотографию, чтобы дать понять пользователю, что он находится в разделе «Женщины» (“Women”)). Итак, создадим с помощью инструмента Прямоугольная область (Rectangular Marquee Tool) (M) область выделения размером 139x105px и зальём цветом #1f1f1f, затем создадим другое выделение размером 121x87px и зальём цветом #767676. Убедитесь, что центры обоих прямоугольников выровнены по вертикали и горизонтали.



Шаг 9: Создание области поиска

Идём дальше. Создаем поле ввода поисковой строки. Выберите Прямоугольник со скруглёнными углами (Rounded Rectangle Tool) (U), создайте прямоугольник размером 123x26px с радиусом углов 15px и залейте его белым цветом. Не забудьте выровнять, как показано на изображении:



Используя инструмент Горизонтальный текст (Horizontal Type Tool) (T), напечатайте внутри прямоугольника слово «Поиск» (“Search”) и примените к нему следующие настройки шрифта:

Font (шрифт): Helvetica Neue LT Std.

Weight (начертание): 55 Roman.

Size (размер): 12px.

Kerning (межзнаковый интервал): Metrics.

Color (цвет): #767676.

Anti-Aliasing (метод сглаживания): Sharp.



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



Шаг 10: Создание области избранного контента

Давайте примемся за создание области избранного содержимого. Начнём с выделения прямоугольной области размером 640x315px с помощью инструмента Прямоугольная область (Rectangular Marquee Tool) (M) и заполним её цветом #c3c3c3.



Теперь создадим панель, где будет находиться сообщение о представленном продукте. С помощью инструмента Прямоугольная область (Rectangular Marquee Tool) (M) создайте выделение размером 480x33px, залейте его цветом #767676 и выровняйте, как показано на рисунке ниже.

Выберите инструмент Горизонтальный текст (Horizontal Type Tool) (T) и напечатайте сообщение, используя следующие настройки шрифта:

Font (шрифт): Helvetica Neue LT Std.

Weight (начертание): 55 Roman.

Size (размер): 14px.

Kerning (межзнаковый интервал): Metrics.

Color (цвет): #ffffff.

Anti-Aliasing (метод сглаживания): Sharp.

Не забудьте выровнять текст и фон, как показано.



Пора написать вводный текст. Выберите Горизонтальный текст (Horizontal Type Tool) (T) и напечатайте слово «Коллекция» (“Collection”), используя следующие настройки:

Font (шрифт): Georgia.

Weight (начертание): Bold.

Size (размер): 18px.

Kerning (межзнаковый интервал): Optical.

Color (цвет): #2d2d2d.

Anti-Aliasing (метод сглаживания): Crisp.

Затем напишите слово «Лето» (“Summer”), используя эти настройки:

Font (шрифт): Georgia.

Weight (начертание): Bold.

Size (размер): 48px.

Kerning (межзнаковый интервал): Optical.

Color (цвет): #ffffff.

Anti-Aliasing (метод сглаживания): Crisp.

И, наконец, напечатайте «Поможем вам отлично выглядеть» (“Helping you look cool”) со следующими применёнными настройками:

Font (шрифт): Helvetica Neue LT Std.

Weight (начертание): 55 Roman.

Size (размер): 18px.

Kerning (межзнаковый интервал): Optical.

Color (цвет): #2d2d2d.

Anti-Aliasing (метод сглаживания): Crisp.

Убедитесь, что выровняли текст, как показано на изображении внизу.



Шаг 11: Создание ярлыка распродажи

Теперь давайте создадим ярлычок распродажи. Используя инструмент Эллипс (Ellipse Tool) (U), создайте круг размером 80x80px, залейте его этим цветом: #2d2d2d, после чего разместите, как показано ниже.



Впишите в окружность текст (например, «Скидка 40%» (“40% off”)) и примените следующие настройки шрифта:

Font (шрифт): Georgia.

Weight (начертание): Regular / Bold.

Size (размер): 48px / 14px.

Kerning (межзнаковый интервал): Metrics.

Color (цвет): #ffffff.

Anti-Aliasing (метод сглаживания): Crisp.



Шаг 12: Создание области основного содержимого

Давайте сделаем область основного содержимого. Начнём с заголовка. С помощью инструмента Горизонтальный текст (Horizontal Type Tool) (T) напечатайте заголовок и примените к нему следующие настройки:

Font (шрифт): Bebas.

Weight (начертание): Regular.

Size (размер): 24px.

Kerning (межзнаковый интервал): Optical.

Color (цвет): #2d2d2d.

Anti-Aliasing (метод сглаживания): Crisp.

Не забудьте поместить его на 20px ниже области избранного контента.



С помощью выбранного ранее инструмента Горизонтальный текст (Horizontal Type Tool) (T) напишите короткое описание этого заголовка со следующими настройками:

Font (шрифт): Helvetica Neue LT Std.

Weight (начертание): 55 Roman.

Size (размер): 12px.

Kerning (межзнаковый интервал): Metrics.

Color (цвет): #767676.

Anti-Aliasing (метод сглаживания): Sharp.

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



Используя инструмент Линия (Line Tool) (U), создайте черту шириной 640px и окрасьте её в цвет #e5e5e5.



Шаг 13: Создание изображений продукта

Выбрав инструмент Прямоугольная область (Rectangular Marquee Tool) (M), выделите область размером 200x152px, заполните цветом #2d2d2d и выровняйте на 20px ниже только что созданной нами линии.



Создайте еще один ярлычок распродажи, такой, как в шаге 11, но на этот раз сделайте круг 45x45px белого цвета. А текст нужен размером 24px/14px и цветом #767676.



Чтобы напечатать название и стоимость товара, используйте Горизонтальный текст (Horizontal Type Tool) (T) со следующими настройками:

Font (шрифт): Helvetica Neue LT Std.

Weight (начертание): 55 Roman.

Size (размер): 12px.

Leading (межстрочный интервал): 21px.

Kerning (межзнаковый интервал): Metrics.

Color (цвет): #767676 / #000000.

Anti-Aliasing (метод сглаживания): Sharp.



Если вам интересно знать – пустое пространство между текстом мы заполним иконкой.

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

Если иконка цветная, перейдите к Слой (Layer) > Новый корректирующий слой (New Adjustment Layer) > Черно-белый (Black & White) … чтобы сделать её чёрно-белой.



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



Шаг 14: Создание большого баннера для боковой панели

Теперь поработаем над боковой панелью. Начнём с большого баннера – инструментом Прямоугольник (Rectangle Tool) (U) создайте фигуру размером 280x314px и залейте ее цветом #2d2d2d. Затем создайте тем же инструментом другой прямоугольник размером 280x41px и залейте цветом #767676 и выровняйте их, как показано ниже.



Используя инструмент Горизонтальный текст (Horizontal Type Tool) (T), напечатайте название баннера, используя следующие параметры:

Font (шрифт): Bebas.

Weight (начертание): Regular.

Size (размер): 18px.

Kerning (межзнаковый интервал): Optical.

Color (цвет): #ffffff.

Anti-Aliasing (метод сглаживания): Crisp.



Выберите с помощью кнопки (U) инструмент Эллипс (Ellipse Tool) (U), создайте круг 210x210px, залейте его цветом #7676767 и постарайтесь выровнять, как на изображении.



Теперь, чтобы избавиться от части круга, выходящей за край фона баннера, откройте панель слоев, поместите слой с окружностью (“tag_bg”) прямо над слоем фона баннера (“box_bg”), затем щёлкните правой кнопкой мыши по слою с кругом и выберите > Создать обтравочную маску (Create Clipping Mask).



Теперь с помощью инструмента Горизонтальный текст (Horizontal Type Tool) (T) напечатайте внутри круга текст, используя следующие настройки:

Font (шрифт): Georgia.

Weight (начертание): Regular.

Size (размер): 18px / 14px / 24px / 30px.

Kerning (межзнаковый интервал): Optical.

Color (цвет): #ffffff.

Anti-Aliasing (метод сглаживания): Crisp.

Также убедитесь, что на панели Символ (Character) выбран “Faux Bold”.



Шаг 15: Создание меньших баннеров боковой панели

С помощью инструмента Прямоугольник (Rectangle Tool) (U) создайте область размером 280x144px, залейте ее цветом #2d2d2d и расположите согласно изображению внизу.



Теперь давайте сделаем кнопку «Узнать больше» (“Know More”). Используйте инструмент Прямоугольная область (Rectangular Marquee Tool) (M) для выделения блока размером 120x30px и залейте его цветом #767676.

Затем выберите Горизонтальный текст (Horizontal Type Tool) (T), напечатайте «Узнать больше» (“Know More”) внутри прямоугольника, используя следующие настройки:

Font (шрифт): Helvetica Neue LT Std.

Weight (начертание): 55 Roman.

Size (размер): 18px.

Kerning (межзнаковый интервал): Optical.

Color (цвет): #ffffff.

Anti-Aliasing (метод сглаживания): Crisp.



Напечатайте еще немного текста с помощью Горизонтальный текст (Horizontal Type Tool) (T), как на изображении внизу, применив следующие настройки:

Font (шрифт): Helvetica Neue LT Std.

Weight (начертание): 55 Roman.

Size (размер): 14px / 24px / 18px.

Leading (межстрочный интервал): 24px.

Kerning (межзнаковый интервал): Optical.

Color (цвет): #ffffff.

Anti-Aliasing (метод сглаживания): Crisp.

На изображении внизу показано, как выровнять текст.



Сделайте копию этого баннера и оставьте между ними 20px вертикального пространства.



Шаг 16: Создание раздела «Новинки Twitter’а» (“Twitter Updates”)

Сделайте выделение размером 280x235px с помощью инструмента Прямоугольная область (Rectangular Marquee Tool) (M), заполните его белым цветом и поместите на 20px ниже баннера.



С помощью инструмента Горизонтальный текст (Horizontal Type Tool) (T) напишите заголовок, используя следующие настройки:

Font (шрифт): Bebas.

Weight (начертание): Regular.

Size (размер): 18px.

Kerning (межзнаковый интервал): Optical.

Color (цвет): #2d2d2d.

Anti-Aliasing (метод сглаживания): Crisp.



Используя инструмент Линия (Line Tool) (U), создайте черту шириной 240px, и окрасьте в цвет #e5e5e5.



Найдите иконку/изображение птички Twitter’а и разместите, как указано ниже. Также убедитесь, что она чёрно-белая, как в шаге 13.



С помощью инструмента Горизонтальный текст (Horizontal Type Tool) (T) напишите текст – пример поста, затем примените к нему эти настройки:

Font (шрифт): Helvetica Neue LT Std.

Weight (начертание): 55 Roman.

Size (размер): 12px.

Leading (межстрочный интервал): 18px.

Kerning (межзнаковый интервал): Metrics.

Color (цвет): #2d2d2d / #767676.

Anti-Aliasing (метод сглаживания): Sharp.



Затем напечатайте «Прочие посты» (“More Tweets”), используя следующие настройки:

Font (шрифт): Helvetica Neue LT Std.

Weight (начертание): 55 Roman.

Size (размер): 12px.

Kerning (межзнаковый интервал): Metrics.

Color (цвет): #2d2d2d.

Anti-Aliasing (метод сглаживания): Sharp.

Не забудьте включить на панели Символ (Character) «Подчеркнуть» (“Underline”).



Шаг 17: Создание раздела «Другие товары» (“Other Products”)

Выберите инструмент Прямоугольник (Rectangle Tool) (U) и создайте фигуру размером 940x264px, залейте цветом #ffffff, и поместите на 20px ниже раздела «Новости Twitter”а» (“Twitter Updates”).

Создайте заголовок этого раздела, как в предыдущем шаге. Затем воспользуйтесь инструментом Линия (Line Tool) (U), чтобы создать черту шириной 898px, и залейте цветом #e5e5e5.



С помощью инструмента Прямоугольник (Rectangle Tool) (U) создайте фигуру размером 178x113px. Скопируйте ее трижды и выровняйте согласно показанному ниже.



Снова напишите информацию о товаре и примените к тексту следующие настройки:

Font (шрифт): Helvetica Neue LT Std.

Weight (начертание): 55 Roman.

Size (размер): 12px.

Leading (межстрочный интервал): 18px.

Kerning (межзнаковый интервал): Metrics.

Color (цвет): #2d2d2d/#767676.

Anti-Aliasing (метод сглаживания): Sharp.

Наконец, не забудьте подчеркнуть «Купить сейчас» (“Buy Now”).



Найдите иконку указателя-стрелки и разместите её, как на изображении ниже, постарайтесь изменить размер примерно до 28x28px и залейте цветом #2d2d2d. Сделайте еще одну копию иконки, и поместите с правой стороны.



Шаг 18: Создание области нижнего колонтитула

Выберите инструмент Прямоугольная область (Rectangular Marquee Tool) (M) и выделите область размером 1260x122px, затем залейте её цветом #2d2d2d.



Напечатайте текст в нижнем колонтитуле, используя для него следующие настройки:

Font (шрифт): Helvetica Neue LT Std.

Weight (начертание): 55 Roman.

Size (размер): 12px.

Leading (межстрочный интервал): 21px.

Kerning (межзнаковый интервал): Metrics.

Color (цвет): #ffffff / #767676.

Anti-Aliasing (метод сглаживания): Sharp.



Наконец, поместите копию логотипа и убедитесь, что он выровнен, как указано ниже, вот и всё!



Сочетание цветов

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

Зависимый, или базовый цвет: Визуально слабый или подчиненный цвет. Контрастирует или оттеняет.

Доминирующий, или основной цвет: Определяет коммуникативную значимость цветовых сочетаний.

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

На этом изображении демонстрируются базовый, основной и акцентный цвета.



Область просмотра

Так как в своем проекте мы применяем портреты, я считаю себя обязанным кратко рассказать об «области просмотра» (“Looking Room”). Обычно на портретном фото имеется предмет и пространство вокруг него. Зрительный интерес к портрету может быть взят из движения, именно так наши глаза перемещаются по снимку. Чтобы заставить взгляд двигаться, фотограф соответственно регулирует пространство вокруг предмета.

Так, например, как можно увидеть на изображении ниже, выравнивание предмета слева (1), с белым пространством (областью просмотра) справа, создаёт некое движение (3), которое заставляет наш взгляд перемещаться в том направлении, куда смотрит объект.



Для дальнейшего чтения:

A Practical Guide to Designing With Faces

You Look Where They Look

Шаг 19: Цвета фона

Теперь давайте раскрасим свой интерфейс! Чтобы залить фоновый слой цветом, можно дважды щёлкнуть на его пиктограмму в панели слоев, удерживая при этом клавишу Cmd/Ctrl, чтобы выделить ее пиксели, а затем нажать Shift+Backspace > Цвет (Color)… > #f6f6f4. Или можно добавить к нему Наложение цвета (Color Overlay).



Шаг 20: Цвета верхней панели

Окрасьте слово «Вход» (“Sign In”) в цвет #ffffff, «Имя пользователя/Пароль» (“User name/Password”) – в #8e8e8e, поля ввода данных – в #8e8e8e, фон кнопки и «Зарегистрироваться» (“Sign Up”) – в #ea6a53, текст навигации – в #999999.



Заполните рекламную площадку изображением, как показано внизу, и создайте для него Обтравочную маску (Clipping mask), как в шаге 14.



Пора раскрасить логотип. Назначьте окружности и слову «Мода» (“Fashion”) цвет #2d2d2d, залейте букву “F” тем же цветом, что и фон – #f6f6f4, а слово «Магазин» (“store”) – #bc3726.



Шаг 21: Цвета навигационной панели

Мы зальём фон текста навигации этим цветом: #c3c3c3, текст – #2d2d2d, слово «Женщины» (“WOMEN”) – #f6f6f4 (представляющим состояния наведения мышью и выбора объекта), а вертикальные отделяющие линии – #b4b4b4.



Чтобы добавить навигационному тексту больше визуальной привлекательности, добавим эффект Падающей тени (Drop Shadow). Настройки – на изображении ниже…



Перейдя к строке поиска, зальём поле ввода белым #ffffff, слово «Поиск» (“Search”) – #a6a6a6, а значок поиска – #ea6a53.



Теперь давайте раскрасим субнавигационную панель… Заполните фон цветом #2d2d2d, текст – #c4c4c4, а границу изображения – #1f1f1f.



Края изображения можно сделать интереснее, добавив к ним эффекты Падающая тень (Drop Shadow) и Внутренняя тень (Inner Shadow). Все настройки показаны ниже.

Добавлено: 17 Сентября 2013 04:24:23 Добавил: Андрей Ковальчук

RSS кнопка в виде елочной игрушки

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

Вот что сегодня должно у нас получиться:



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



Рисуем шарик


1. Ну что ж.. Для начала создаем документ 500 на 500 пикселей. Выбираем инструмент Овальная область



2. Чертим круг.

3. Далее выбираем два цвета



4. Выбираем инструмент градиент

5. Выбираем тип градиентной заливки - радиальный градиент

6. Заливаем область



7. Далее заходим в настройки градиента, щелкнув вот по этой кнопочке



8. Редактируем градиент вот так:



По обе стороны цвет один и тот же, только в правой стороне цвет прозрачный.

9. Далее делаем небольшое овальное выделение вверху, и заливаем градиентом



10. Проделываем операцию 9, только создаем чуть меньшее выделение, и цвет чуть темнее, вот что получится:



11. Создаем новый слой, создаем выделение и заливаем наш шар цветом #B40000



12. Сдвигаем выделение



13. Очищаем выделение.

14. Теперь выделяем (CTRL + Левая кнопка мыши по слою) нашу тень которую мы создавали в пункте 9



Жмем delete до тех пор пока не получится вот так:



15. Теперь понизим прозрачность этой тени



Вот что получилось:



Рисуем кончик шарика

1. Создаем овальное выделение вверху шарика

2. Настраиваем градиент



Цвета берутся на глазок

3. Заливаем область



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



5. Создаем новое овальное выделение, настраиваем градиент



6. Заливаем



7. Ластиком удаляем лишние элементы



8. Подгоняем пропорции



RSS изображение


1. Для начала чертим большой овальный круг



2. Далее уменьшаем выделение и очищаем



3. Так продолжаем до тех пор пока не получится следующее:



4. Удаляем левый и нижний край



5. Для того что бы закруглить края, создаем небольшое выделение инвертируем ( SHIFT + CTRL + I ) его и подтираем ластиком



6. Делаем подобную операцию со всеми краями RSS изображения. Вот что получилось:



Для того что бы RSS изображение было во весь шарик, я не увеличивал RSS изображение, я уменьшил шарик

7. Теперь побалуемся с стилем изображения. Для начала зальем наше RSS изображение белым цветом

8. Далее наложим эффект внешнего свечения ( Слой->Эффекты слоя->Внешний Свет ) настроил так



9. Теперь с помощью пера ( кнопка "p" на клавиатуре ) сделал вот такое выделение:



10. Заходим в пути и щелкаем по слою левой кнопкой мыши с зажатым CTRL.



11. Заливаем чем нить темным, и делаем слой по прозрачнее

12. Выделяем наше RSS изображение ( Щелкнуть по слою с зажатым CTRL ) инвертируем выделение, удаляем лишнию тень



13. Выделяем весь шарик, заливаем его, на новом слое, черно белым градиентом



14. Выделяем RSS изображение, инвертируем выделение, и удаляем лишнию тень



15. Делаем тень прозрачнее



Тень шарика


1. Выделяем весь шар, и в новом слое заливаем его черным



2. Заходим в Фильтр->Смазывание->Смазывание Гаусса



3. Сдвигаем тень шарика чуть ниже, и делаем немного прозрачнее



Заключение


Вот что получилось у меня



По моему скоромному мнению ( ИМХО ) очень даже не плохо получилось Если есть какие то вопросы по созданию такой кнопки, или по фотошопу, то задавайте их в комментариях, с удовольствием отвечу!

Удачи Вам, на сегодня у меня все!

Добавлено: 10 Сентября 2013 12:38:11 Добавил: Андрей Ковальчук

Рисуем объемную RSS иконку

Доброго времени суток дорогой читатель Блога RS! Сегодня пост будет немного похож на ранний мой пост "RSS кнопка в виде елочной игрушки". Почему опять RSS иконка? Я на днях, лазя по сети нашел очень красивую кнопку на блоге. Решил попробовать нарисовать такую же. Конечно моя иконка не самая симпатичная, но все же эффект получился вполне красивый. Вот что у нас должно сегодня получиться



Начальные элементы

Нам необходимо нарисовать для начала плоскую кнопку, процесс создания очень схож с процессом создания RSS кнопки в виде елочной игрушки. Так что я буду минимально уведомлять Вас о создание плоского изображение. Поехали 1. Создаем документ 500 на 500 пикселей, создаем овальное выделение



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



3. Далее создаем новое овальное выделение, сдвигаем его, и на новом слое заливаем белым



4. Подтираем белую заливку за пределами нашей красной сферы. Выставляем прозрачность ~20%



5. Повторяем операцию 3 и 4



6. Активируем слой с красной сферой. Заходим в Слой->Эффект слоя->Внутренний свет, выставляем такие параметры



RSS иконка


1. Создаем на новом слое овальное выделение, и заливаем его черным



2. Уменьшаем выделение, чистим его, далее опять уменьшаем выделение



3. Делаем подобную операцию, пока не получим следующее



4. Очищаем левый и нижний край



5. С помощью инвертированного выделения и ластика закругляем углы у RSS иконки





6. На новом слое заливаем RSS иконку белым цветом. Именно на новом, так как в будущем слой с черным изображением, RSS иконки, нам понадобится!



7. Активируем слой с белой RSS иконкой, заходим в Слой->Эффект слоя->Внешний свет. Выставляем следующие параметры



8. Выделяем нашу RSS иконку ( CTRL + Левая кнопка мыши ) и на новом слое заливаем радиальным градиентом



9. Делаем радиальную тень прозрачнее



10. С помощью пера делаем контур



11. Создаем из контура выделение, заливаем на новом слое это выделение черным цветом. Выделяем RSS иконку, инвертируем выделение



12. Чистим лишнию тень



13. Делаем прозрачнее



Перспективная трансформация

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



В новых версиях, есть возможность объединить эти слои в группу. Или же просто выбрать все три слоя путем зажатия shift + левая кнопка мыши. Так или иначе мы должны перспективной трансформацией привести все три слоя к такому виду



Создаем объем красной сфере


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



Создаем объем RSS иконки

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



2. Теперь создаем выделение из черной RSS иконки, и на новом слое заливаем выделение белым цветом



3. Копию RSS иконки которую мы создали в 1-ом пункте сдвигаем вверх



4. Теперь копируем и двигаем на пару пикселей вверх слой который мы создали во 2-ом пункте. Обратите внимание для чего это делается ( Справа до, слева после )





5. Сливаем в один слой все то что мы на копировали в 4-ом пункте. Жмем CTRL + L ( Вызываем уровни ) и сдвигаем самый нижний ползунок, для того чтобы сделать наш слой темнее





6. Теперь можно объединить все слои с RSS иконкой. 7. Делаем копию RSS иконки и сдвигаем ее вниз



8. Делаем прозрачнее



9. Делаем активным слой с видимым RSS изображением, вызываем уровни ( CTRL + L ) и настраиваем так



Для вот такого результата



Заключение


Ну что ж, результат довольно не плох ( ИМХО )



Надеюсь Вам пригодится такая кнопочка... Если есть какие вопросы то задавайте их, отвечу!

Добавлено: 10 Сентября 2013 12:26:08 Добавил: Андрей Ковальчук

Кнопка в стиле золотой ленты

Всем доброго времени суток! Сегодняшний пост будет не частью цикла статей "Создать блог с нуля", но тем не менее эту заметку можно отнести к теме "создание сайта", ибо графика неотъемлемая часть любого веб проекта! Я конечно не дизайнер, но кое что умею, и этим кое чем я поделюсь с Вами =)

Этот пост написан не только с целью разнообразить контент на моем блоге. Этот пост, так же является конкурсной статьей. Конкурс называется «Золотой пост» на 1050$+, проводит его "Вовкин seo блог", спасибо ему за это =)

Для начала покажу Вам результат работы, вот он





Как я уже говорил, я не дизайнер, но по моему получилось довольно симпатично =)

Давайте приступим.

Первым делом нам необходимо открыть новый документ. Я создал холст размером 500 на 500 пикселей
Для начала нам понадобится квадратная область, так сказать макет нашей кнопки. Чертил я его инструментом "Закругленный прямоугольник", фотошоп мне пишет, что этот инструмент вызывается кнопкой "U". Закругление прямоугольника (радиус) составляет 0.5 см. Чертим и заливаем



Теперь нам необходимо нарисовать фон ленты. Я выбрал вот эти цвета (#222222 и #F3A83B)



Рисуется лента на новом слое, приблизительно вот так



Теперь необходимо ее повернуть на 45 градусов (на глазок =)) против часовой стрелки. Для этого я использовал простую трансформацию объекта. (правой кнопкой по изображению -> произвольная трансформация)



Теперь необходимо выделить наш макет (черный закругленный прямоугольник) щелкнув левой кнопкой мыши с зажатым ctrl по слою



инвертировать выделение (shift + ctrl + i) и очистить слой с фоном ленты, а именно все то, что не попало в область нашего макета (черного закругленного прямоугольника)



Фон готов. Теперь нужно поработать над бликами кнопки

Для этого создаем на новом слое два круглых выделения, и заливаем их белым цветом



Заходим в фильтр -> смазывание -> смазывание Гаусса... Я выставил радиус 59,4 пикселя



Теперь необходимо выделить макет, инвертировать выделение и очистить блики которые не входят в границы нашей кнопки



Теперь давайте добавим немного больше бликов для левого верхнего угла кнопки. Для этого

Создаем новый слой
Выделяем кнопку (щелчком левой кнопкой мыши с зажатым ctrl по слою)
Заливаем белым
Создаем круглое выделение, и чистим белый слой



Теперь убавим прозрачность для слоя с остатками белого фона (я выставил 20%)



Теперь можно поиграть с стилями, я добавил выпуклости (в моем фотошопе это называется "Фаска и рельеф", в новых версиях вроде называлось - "Атлас")



Плюс еще добавил внешний свет (отблеск). Цвет для света я выбрал такой же как и для светлой части ленты (#F3A83B)



Можете побаловать с настройками, для достижение максимально привлекательного вида =)

После того как закончите баловаться с настройками, Подумаем о том что будет находится на кнопке. Я для урока выбрал букву "f" то бишь facebook. Шрифт для буквы я выбрал Arial bold



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



Сильно изощряться с стилями буквы я не стал, добавил лишь внутреннюю тень



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



Заключение

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

Всего Вам наилучшего! До скорых встреч!

Добавлено: 09 Сентября 2013 11:47:02 Добавил: Андрей Ковальчук

Повторяющийся фон для Вашего сайта

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

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



Давайте начнем.



Предварительные работы над нашем фоном


Для начала нам необходимо просто нарисовать какой либо фон.

1. Создаем новый документ 600 на 600 пикселей



2. Я выбрал два цвета #F1F1F1 и #E4E4E4



3. Теперь применяем к созданному документу фильтр Clouds. (фильтр -> Render -> Clouds)
4. После чего несколько раз Difference Clouds. (фильтр -> Render -> Difference Clouds) В общем Вы должны получить приблизительно вот такую картинку:



Если сейчас, данный фон попробовать размножить, то мы получим вот такую не красивую картинку:



Как видите границы стыковки изображений очень четко видны, нам необходимо избавится от них!

Нарезаем изображение

1. Давайте первым делом создадим копию нашего фона на новом слое, а сам фон зальем белым цветом



2. Теперь создадим, в левом нижнем углу, выделение 450 на 450 пикселей



3. Жмем Shift + Ctrl + J, таким образом мы вырежем из слоя с фоном выделенную область



4. Теперь у слоя, на котором остались верхняя и правая граница, удаляем правый верхний угол



5. Теперь выделяем правую границу и жмем Shift + Ctrl + J, для того чтобы верхняя и правая граница были на отдельных слоях.



Теперь у нас имеется четыре слоя:

Белый фон
Верхняя граница
Правая граница
Квадрат размером 450 на 450 пикселей



Последнее что нам осталось сделать в данном пункте это поменять слои местами. Необходимо чтобы область размером 450 на 450 пикселей была ниже чем правая и верхняя граница. Слои должны быть вот в таком порядке:



Убираем границы у фона. Создаем повторяющийся фон


Для чего нам необходимо было нарезать фон на три части? Если верхнюю границу сдвинуть в самый низ, а правую влево, и чуть чуть с ними (с границами) по колдовать, то мы получим именно то, что создаем в данном уроке!! =)

1. Давайте сдвинем границы и получим следующий результат:



2. Теперь нам необходимо у сдвинутой правой границы удалить один из углов. Смотрите скрин ниже



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



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



4. Теперь необходимо слить сдвинутую правую границу и сдвинутую верхнюю границу.



5. Далее нам необходимо удалить верхний и правый угол у наших, уже слитых, границ. Внимание на скрин



6. Теперь нам необходимо (опять) подогнать рисунок с помощью ластика. Вот как выглядит изображение у меня:



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



Обратите внимание, что затирать можно лишь внутреннею сторону. Внешнюю трогать нельзя!



Ну что же, осталось слить изображение



Заключение


Теперь если замостить данным фоновым изображением страницу сайта, то Вы не увидите границ, и очень сложно будет понять где именно изображение начинается, а где заканчивается =)



Надеюсь данный урок Вам покажется полезным =)

Всего Вам наилучшего! На сегодня у меня все!

Добавлено: 09 Сентября 2013 10:10:45 Добавил: Андрей Ковальчук