Это рубрика lessons.

:

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

usability

Шаг 1. Создаем новый документ (Ctrl+N), размером 200*200 пикселей. Зальем его #888888 цветом. Выставляем направляющие, как показано на рисунке внизу (для этого нажимаем Ctrl+R, чтобы появились линейки (если их нет) и просто вытягиваем направляющие из линеек, вертикальной и горизонтальной. Выставить их необходимо ровно посередине.).
Теперь, выбираем Инструмент Овальная область (Elliptical Marquee Tool (M)), ставим курсор в месте пересечения направляющих и, удерживая Shift+Alt, рисуем круг из центра (именно для этого мы удерживали Shift и Alt) диаметром около 120 пикселей. Не снимая выделения, создаем новый слой (Ctrl+Shift+N), называем его «inset» и заливаем его Черным (Black).
рисуем круг выставляем направляющие заливаем

Шаг 2. Используя опять Инструмент Овальная область (Elliptical Marquee Tool (M)), рисуем в том же месте такой же круг, только на примерно 4 пикселя меньше. На основе выделения создаем новый слой (называем его «base») и заливаем круг #2a2a2a цветом. Открываем Стили Слоя (Layer Styles) и задаем для Gradient Overlay (Перекрытие Градиентом) следующие параметры (Градиент — «От Черного к Прозрачному (Black to Transparent )»):
gradient overlay градиентное перекрытие

Шаг 3. Рисуем тем же способом еще один круг, но на 15 пикселей меньше предыдущего. Создаем новый слой, называем его «base-inset» и закрашиваем круг #2a2a2a цветом. Открываем Стили Слоя и выставляем для Перекрытия Градиента (Градиент — «от Черного к Прозрачному»):
gradient overlay градиентное перекрытие

Шаг 4. Добавим немного трёхмерности, для этого осветлим верхнюю часть круга сделанного в предыдущем шаге, как будто на него падает свет сверху. Выделяем круг на слое «base-inset» и на его основе создаем новый слой «highlight». Далее идем Edit>Stroke> 1px outside (Редактирование>Выполнить обводку>1 пиксель снаружи (цвет белый)). Стираем Мягким ластиком (Eraser Tool (E)) 2/3 обводки, для оставшейся задаем Непрозрачность (Opacity) слоя 8%.
рисуем обводку stroke

Шаг 5. Пришло время сделать «захваты для пальцев». Если делать их по одной, то можно с ума сойти, но мы пойдем другим путем, а именно: выбираем Инструмент Овал (Ellipse Tool (U)), в режиме «Контуры (Paths)paths« и рисуем круг примерно на 5 пикселей шире внутреннего. После этого выбираем Инструмент Текст (Type Tool), чтобы подвести к контуру и увидеть:
пишем по контуру

Шаг 6. Выбираем шрифт Verdana, 6px, Smooth (Плавное), расстояние между знаками 1500 и вместо текста ставим значки (|).
задаем шрифт

Шаг 7. К слою с текстом применим слудующие Стили Слоя (Layer Styles):
drop shadow

outer glow
color overlay

Вот, что должно получиться в итоге:
drop shadow

Шаг 8. Создаем новый слой «highlight-2» и рисуем Овал в верхней части основного круга. Заливаем его Градиентом «от Белого к Прозрачному» и задаем Непрозрачность (Opacity) слоя 20%.
oval

Шаг 9. По сути, наш регулятор громкости готов, осталось только добавить красивый индикатор в центре. Для этого создаем новый слой (он должен быть самым верхним на Панели Слоев), называем его «orb-base» и рисуем круг в центре регулятора на, примерно, 6 пикселей меньше внутреннего круга. Заливаем круг #147ac1 цветом. Далее вызываем окно Стилей Слоя и выставляем следующие параметры (для Outer Glow цвет — #147ac1):
drop shadow

outer glow
inner glow

Вот результат:
орбита

Шаг 10. Дублируем слой с «orb-base», называем «inner-glow», меняем Заливку (Fill) слоя на 0% и применяем к слою следующие Стиль Слоя (Layer Style):
inner glow

Шаг 11. Копируем слой «inner-glow» и называем его «inner-glow-2». Параметры Стиля Слоя:
inner glow

Шаг 12. Копируем теперь «inner-glow-2» и называем его «inner-glow-3». Задаем параметры Стиля Слоя:
внутреннее свечение

Результат:
orbit

Шаг 13. Создаем ещё одно круговое выделение на 4 пикселя меньше предыдущего. На его основе новый слой «full-highlight». Заливаем круг #FFFFF цветом и меняем Режим Смешивания (Blending Mode) этого слоя на Overlay (Перекрытие), Непрозрачность (Opacity) — 15%.
overlay

Шаг 14. Создаем новый слой «highlight-top» и рисуем на нем Овал. Заливаем Градиентом (Gradient) «от Белого к Прозрачному». Непрозрачность (Opacity) слоя ставим 35%.
рисуем блик

Шаг 15. Рисуем маленький круг в центре индикатора. Удаляем внутреннюю часть круга, оставляя бублик шириной около 4 пикселя. Размоем его с помощью Filter>Blur>Gauusian Blur (Фильтр>Размытие>Размытие по Гауссу), радиус — 4. Дублируем этот слой, делаем копию чуть меньше и размещаем её
orbit

Шаг 16. Создаем новый слой «indicator». Рисуем опять круг из центр, размером на 4 пикселя меньше основого круга индикатора. Закрашиваем его Белым (White). Тут же рисуем еще один круг на 4 пикселя меньше предыдущего и нажимаем Delete, тем самым получаем еще один бублик. Ставим Непрозрачность (Opacity) слоя на 20%. Дублируем этот слой, удаляем часть (см. рисунок) и ставим Непрозрачность (Opacity) слоя на 30%.

Вот и все! Мы добавили ещё текст и тень от самого регулятора.
usability

:

В данном уроке мы узнаем, как сделать иконку в Фотошопе. Иконка хоть и ретро, но выглядит вполне симпатично, да и делается очень быстро ;).

3d иконка

fill oval

Шаг 1. Создаем новый документ (Ctrl+N) и заливаем фон черным цветом (Shift+F5 и выбираем черный (black)). Рисуем белый овал с помощью Инструмент Oval (Эллипс (U)).

fill oval

Шаг 1. Создаем новый документ (Ctrl+N) и заливаем фон черным цветом (Shift+F5 и выбираем черный (black)). Рисуем белый овал с помощью Инструмент Oval (Эллипс (U)).

перо
pen tool

Шаг 2. Нажимаем клавишу «+» на клавиатуре (чтобы следующая фигура добавилась к предыдущей) и, выбрав Инструмент Перо (Pen Tool (P)), рисуем хвостик

gradient overlay
наложение градиента

Шаг 3. Теперь идем в Стили Слоя (Layer Styles) (для этого нажимаем на клавишу layer styles внизу Палитры Слоев) и выбираем пункт Gradient Overlay (Наложение Градиента). Выставляем следующие параметры

рисуем овал
градиент
gradient

Шаг 4. Рисуем ещё один Овал и применяем к нему Стиль Слоя Gradient Overlay со схожими параметрами (различия будут только в Угле (angle)).

растрируем слой

Шаг 5. Дублируем нижнюю фигуру (для этого идемна слой с фигурой и нажимаем Ctrl+J), растрируем её (кликаем правой кнопкой мыши по слою на Палитре слоев и выбираем пункт «Растрировать слой» (Rastrize layer)) и перемещаем слой вниз (Ctrl+Shift+{).

lasso tool
fill

Шаг 5. Создаем новый слой (Ctrl+Shift+N) и, выбрав Инструмент Лассо (Lasso Tool (L)) рисуем выделение, как на картинке внизу. После этого заливаем его #0588BC цветом (Shift+F5).

выделение
кисть
тень

Шаг 6. Удеживая клавишу Ctrl, кликаем по миниатюре последнего сделанного нами слоя (которого мы переносили вниз), чтобы выделить фигуру. Нажимаем Ctrl+J, чтобы на основе этого выделения создать новый слой и, выбрав мягкую Кисть (Brush tool (B)) #013C54 цвета, рисуем затененный участок (что придаст дополнительный 3d эффект).

рисуем тень

Шаг 7. Сливаем все слои с фигурами (для этого выделяем их, Удерживая Shift, на Палитре Слоев и нажимаем Ctrl+E). Дублируем этот слой (Ctrl+J), переносим вниз на Палитре Слоев и перемещаем саму фигуру вниз (с помощью Инструмента Move (перемещение (V)))

рисуем трехмерную иконку в фотошопе

Шаг 8. Ну и наконец, осталось только уменьшить Непрозрачность (Opacity) слоя с тенью до 50% и наша 3D иконка готова!

:

(function(w, d, n, s, t) { w[n] = w[n] || []; w[n].push(function() { Ya. Context. AdvManager. render({ blockId: «R-A-76826-3», renderTo: «yandex_rtb_R-A-76826-3», async: true }); }); t = d. getElementsByTagName(«script»)[0]; s = d. createElement(«script»); s. type = «text/javascript»; s. src = «//an. yandex. ru/system/context. js»; s. async = true; t. parentNode. insertBefore(s, t); })(this, this. document, «yandexContextAsyncCallbacks»); Создадим макет сайта с помощью Фотошопа на примере макета блога. Быстро и просто.

макет блога

gradient overlay
drop shadow
inner shadow
шапка сайта

Шаг 1. Создаем новый документ (Ctrl+N) подходящего размера (например, 1200*800 px). Создаем новый слой и, выбрав Rectangle Tool (Прямоугольник (U)), рисуем прямоугольник размером 1200*140 px (т. е. 100% по ширине). И применяем к этому слою Стили Слоя.

header

Шаг 2. Добавляем тень, как показано в следующем уроке

тень

Шаг 3. Копируем слой с тенью из прошлого шага и переносим ее вниз + идем Edit>Transform>Flip Vertical (Редактирование>Трансформация>Отразить по вертикали).

навигация

Шаг 4. Задаем в качестве Основного цвета (foreground color) черный (#000000), затем задаем новый слой и называем его «navbar». Используя Rectangle Tool(U), рисуем прямоугольник размером 900*27 пикселей. Размещаем его, как показано на рисунке внизу и уменьшаем Непрозрачность до 5%.

навигация

Шаг 5. Теперь, выбираем в качестве Основного цвета (foreground color) белый и создаем новый слой «navbarstroke». Выбираем инструмент Pencil Tool (Карандаш (B)) и рисуем обводку. Непрозрачность данного слоя ставим — 8%.

навигационное меню

Шаг 6. Добавим кнопки, для этого будем использовать шрифт Verdana, bold, 12 размера, белого цвета. Для раделения нарисуем на новом слое белые вертикальные линии подходящей Непрозрачности. Также добавим индикатор нахождения на соответствующем разделе сайта в виде маленького треугольника (рисуем его на отдельном слое, как делала это ранее). У нас навигационное меню будет состоять из 7 пунктов, с расстоянием между линиями примерно 88 пикселей.

поисковая форма

Шаг 7. Нарисуем поисковую форму. Для этого задаем в качестве основного цвета — #426d97 и рисуем на новом слое подходящего размера прямоугольник (у нас это 200*18 пикселей). Плюс к этому добавляем 1 пиксельную обводку с помощью соответствующего Стиля Слоя — Stroke (Обводка). Непрозрачность делаем примерно 12%.

gradient overlay
поисковая форма

Шаг 8. Добавим теперь поисковую кнопку. На новом слое с помощью все того же Rectangle Tool(U) Рисуем 67*18px прямоугольник. Добавляем соответсвующий текст (шрифт — verdana, 11 pt, белый) и применяем к слою с конопкой следующий стиль

stroke
drop shadow
заголовок

Шаг 9. Добавляем заголовок. Задаем основной цвет — белый. Шрифт — Trebuchet MS, размер — 32 пикселя. Применяем к нему следующие Стили Слоя

заголовок

Шаг 10. Добавим тень к заголовку. Дублируем слой с тенью дважды, размещаем ее сверху и снизу от текста, уменьшаем и стираем лишнее. Для второй тени также идем Edit>Transform>Flip Vertical.

основной блок

Шаг 11. Займемся основным текстовым блоком, для этого создаем новую группу слоев «post» и помещаем в неё все новые слои в эту группу. Для заголовков будем использовать шрифт Verdana, bold, 14 pt, #74aae2, для фраз “Posted by…” — Verdana, 11 pt, #8796ad, а для основного текста — Verdana, 12 pt, #616161. Размер текстового блока делаем 650 пикселей по ширине. Линии означающее конец раздела рисуем на новом слое и #e3e3e3 цвета с помощью Pencil Tool(B). После запись в разделе будем писать шрифтом Arial, size 11, #5c5b5b.

иконка комменариев

Шаг 12. Рисуем иконку комментариев. Задаем основной цвет — #76aae3. На новом слое с помощью Custom Shape Tool(U) рисуем подходящую форму. После этого меняем основной цвет на белый и с помощью Pencil Tool(B) рисуем маленькие белый линии. Для сопрводтельного текста будем использовать шрифт Arial, size 11, #5c5b5b.

текстовый блок

Шаг 13. Дублируем текстовый блок и перемещаем его вниз. Шаг 14. Пришло время для боковой панели. Рисуем область (на новом слое) шириной 200 пикселей с помощью Pencil Tool(B), предвартельно задав для основного цвета #74aae2. Для текста будет использовать шрифт verdana, size 14, #74aae2.

боковая панель

Шаг 15. Для подложки под аватарку будем использовать основной цвет — #ededed и инструмент Rounded Rectangle Tool(U), а для шрифта на боковой панели — verdana, size 11, #616161.

иконка

Шаг 16. Нарисуем иконку, которая будет стоять напротив пунктов меню Recent Posts и Archives. Кроме этой иконки остальный установки будут аналогичны использованным в шаге 15.

иконка листа

Шаг 17. Рисуем иконку, для этого увеличиваем масштаб до 3200% и задаем для основного цвета — #bebcbc. Далее выбираем инструмент Pencil Tool(B) c диаметром 1px и рисуем форму.

иконка листа

Шаг 18. Добавляем согнутый уголок все тем же инструментом, но #acabab цвета.

иконка листа

Шаг 19. Теперь, давайте добавим тени с помощью Карандаша двух цветов: #e7e7e7 и #ebebeb.

макет блога

Шаг 20. Разместим иконку в подходящих местах.

макет блога

Шаг 21. Ну вот почти и все. Добавим лишь разделительную черту между основным блоком и боковой панелью. Для этого воспользуемся ранее сделанной тенью, повернем её (Edit>Tranform>Rotate 90 CW) и сотрем лишнее. Ну вот и все, наш макет блога готов!