Векторные круги в стиле веб 2.0 — уроки фотошоп

Векторные круги в стиле веб 2.0

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

Для начала откройте новый документ File – New любого размера. Залейте его черным цветом Edit – Fill – Color и выберите инструмент Ellipse Tool.

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

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

Создайте новую группу, кликнув по иконке в виде папки, которую вы увидите в нижней части палитры слоев Create a new group.

Включите в нее все слои, которые вы создали ранее для кругов (просто выделите и перетащите их один за другим в папку, которую создали).
Следующее, что вам нужно сделать – объединить все слои.

Для этого необходимо выделить папку, кликнуть по окошку с параметрами слоя и выбрать Merge Group.

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

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

Возьмите инструмент Gradient Tool и примените свои параметры (важная часть): вы увидите линию с градиентом, кликните по ней дважды для открытия окна градиентов.

Создать наш градиент будет легко. Просто используйте две точки градиента белого цвета в начале и в конце линии градиента. Обратите внимание, что у белой точки в конце непрозрачность (opacity) уменьшена до 0% (Чтобы уменьшить непрозрачность точки градиента, кликните по индикатору, расположенному над индикатором выбора цвета, это и есть непрозрачность (opacity)).

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

Теперь уменьшим opacity этого слоя до 84% и заливку (fill) до 89%. Выберите инструмент Eraser Tool и кистью с жесткостью (hardness) 100% и 100% opacity сотрите часть градиента, как показано на рисунке ниже.

В завершение придадим кругу глубины и объема. Этого мы достигнем, применив эффект Bevel and Emboss.
Дважды кликните по слою с кругом (только рядом с названием, а не по самому названию), и перед вами появится окно стилей слоя (layer styles). Выберите параметр Bevel and Emboss и примените следующие настройки:

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

Для создания финального изображения вам нужно просто сгруппировать (Merge) слой с кругом и слой с бликом. Затем дублируйте группу несколько раз и поменяйте расположение и размер каждого круга.

Оставляю это на ваше усмотрение.
О возникающих проблемах пишите в комментариях.

Источник: https://pixelbox.ru/vektornye-krugi-v-stile-veb-2-0

Дизайн в стиле Web 2.0: простота как искусство

Совершенство достигается не тогда, когда уже нечего прибавить, но когда уже ничего нельзя отнять (Антуан де Сент-Экзюпери. «Планета людей», 1939 г.)

Далекой осенью 2005 года с легкой руки издателя Тима О’Рейли в лекцион веб-разработчиков прочно вошел термин Web 2.0. Как и всякий новый термин, он до сих пор остается предметом оживленного обсуждения, в ходе которого определена главная особенность, уже не подвергающаяся сомнению. Придя на смену «старому» Web 1.0, Web 2.

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

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

Рассмотрим, какие же дизайнерские приемы используются чаще всего при разработке сайтов в стиле Web 2.0, так сказать основные особенности стиля.

Ничего лишнего. Простота становится главным приоритетом в дизайне. Отказ от дополнительных декоративных элементов радикально упрощает навигацию и концентрирует внимание пользователя.

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

Три колонки – предел. Если еще несколько лет назад размещение материала в три-четыре колонки было нормой, то в дизайне Web 2.0 разработчику придется уложиться в минимальное количество колонок, не загромождая экран до краев.

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

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

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

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

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

0 логотипы различных проектов в блоге мы уже писали — советуем почитать, а еще лучше глянуть на все картинке в статье.

Пишем прописными. На сайтах в стиле Web 2.0 обычно используется достаточно крупный размер шрифта. Крупный кегль позволяет сохранить простоту и функционального дизайна, ведь мелкий шрифт воспринимается сложнее, особенно при быстром пролистывании или на LCD мониторах при ярком солнечном освещении.

Крупнотекстовые вставки. Демократичный дизайн Web 2.0 позволяет использовать заголовки и другие текстовые вставки очень большого размера. Этот прием чаще всего реализуется в виде графического объекта и позволяет легко завладеть вниманием пользователя даже при беглом просмотре страницы.

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

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

Вспышки-звездочки. Эти небольшие ярлычки в виде вспыхивающих звездочек помогают посетителю обратить внимание на важные разделы сайта, например, ценники при распродаже и т.д. Советуем также глянуть на статью бейджи в стиле web 2.0 для сайта, где мы собрали парочку подходящих примеров.

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

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

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

Кстати, если говорить о дизайнах и примерах, то кое-что можно найти в подборке тренды веб-дизайна (в 2009 году, там 3 части), но вообще, если вы активный пользователь интернета, то найти подобные решения не так сложно:

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

P.S. Полезный сайт для работы в интернете — Справочная служба WebMoney — информация и консультации по Вебмани.
Постовой. В интернет магазине Viktory можете купить тренажеры киев, 24 часа в сутки 7 дней в неделю.
Интересная статья для тех, кто хочет завести домашнего питомца — породы кошек с красивыми фотографиями и описанием.

Источник: http://design-mania.ru/web-design/articles/dizajn-web20/

Базовые уроки веб-дизайна в Фотошопе

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

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

Если работа веб-дизайнера придется Вам по душе, с помощью Фотошопа Вы сможете не только обрабатывать фотографии, но и делать сайты, обложки книг, баннеры и многое другое! Огромный арсенал средств ретуширования, обработки и монтажа изображений, точная цветовая калибровка, «ювелирная» работа с цветом делают Adobe Photoshop самым популярным, да что там говорить — самым лучшим графическим редактором.

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

Как начать изучение Фотошопа?

Чтобы понять, как пользоваться Фотошопом, начните с теоретических основ. В первую очередь, скачайте и установите программу. Если у вас современный компьютер на базе процессоров FX или i5–i7, с минимум 8 гигабайтами оперативки, можете смело устанавливать Photoshop СS6, если характеристики ниже — придется довольствоваться PhotoshopCS5.

Практический курс по созданию дизайна сайтов в Photoshop

Читайте также:  Как в фотошопе отбелить зубы - уроки фотошоп

Станьте профессиональным веб-дизайнером, создавая востребованные макеты сайтов.

Узнать подробнее

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

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

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

Как настроить Photoshop для веб-дизайна?

Нажимаем Окно – Рабочая среда – Типография. Справа у Вас появятся панели работы со слоями и шрифтами.

Далее, советую перейти в настройки Ctrl+K и в разделе «Единицы измерения и линейки» выбрать Пиксели, т. к. мы работаем для веба, где используются именно пиксели, а не сантиметры.

Создаем новый файл: Файл — Новый, в каждом новом проекте проверяем, чтобы в настройках Ширины и Высоты стояли Пиксели. Разрешение — 72 точки на дюйм. Цветовая модель должна быть указана RGB цвет 8 бит.

Вообще, к параметрам создания нового документа относятся:

Имя будущего документа. Его обычно назначают при сохранении файла;

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

Разрешение — количество точек на дюйм. Стандартным разрешением считается 72 пиксела на дюйм;

Режим. Самым распространенным является RGB цвет, глубина которого задается в битах. Обычно хватает 8 бит;

Содержимое фона, определяющее фон изображения.

Следующая настройка, о которой хотелось бы упомянуть, и о которой часто незаслуженно забывают, — это настройка обычной стрелки. Ставим галочку в Автовыборе, выбираем Слой и «Показывать управление трансформацией». Благодаря этому параметру вокруг выделенных областей будет появляться пунктирный прямоугольник с манипуляторами в серединах и углах сторон.

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

Создаем прямоугольник в Photoshop

Расскажу Вам, как сделать простенький объект в Фотошопе. С помощью инструмента «Прямоугольник» создаем одноименную фигуру, задаем ей нужный цвет заливки и границы. Здесь же можно создать прямоугольник с закругленными углами.

Небольшой лайфхак: если вы выделяете какой-либо объект (в данном случае, прямоугольник), то вы сможете изменить его размеры пропорционально, выделив его и зажав клавишу Shift. Таким образом, вы не деформируете изображение.
Это очень удобно, когда вы работаете с иконками. Зажав клавишу Alt, вы сможете скопировать объект при перетаскивании левой кнопкой мыши.

Практический курс по созданию дизайна сайтов в Photoshop

Станьте профессиональным веб-дизайнером, создавая востребованные макеты сайтов.

Узнать подробнее

Делаем кнопку для сайта в стиле flat design

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

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

Создаем новый документ Файл — Новый и выбираем инструмент «Прямоугольник со скругленными углами».

Выбираем цвет, например, оранжевый #ff8b00, и радиус углов — 4 пикселя.

Рисуем кнопку нужного размера:

Чтобы сделать небольшой объем в стиле «плоского дизайна», выполните следующий прием. Создайте копию слоя с нашей кнопкой Ctrl + J, затем нижний слой с прямоугольником на 2–3 пикселя передвиньте вниз. Сделайте его цвет более темным, например, оттенка #bf6800.

Получится примерно такой результат:

На верхний прямоугольник можно добавить стиль «Градиент». С помощью двойного клика нажмите на слой с фигурой, выберите стиль «Наложение градиента» и поставьте угол наклона 90 градусов.

Цвета градиента — #ff8c00 и #ffcc3f.

Теперь наша кнопка выглядит так:

Для подписи можно применить шрифт Myriad Pro белого цвета.

Чтобы надпись была более удобочитаемой, создадим небольшую тень. Для этого выполним те же действия, что и с прямоугольниками. Скопируем слой с надписью, а нижний слой передвинем вниз на 1 пиксель и зададим цвет #be6d00.

Результат:

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

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

Источник: https://webformyself.com/bazovye-uroki-veb-dizajna-v-fotoshope/

Урок по созданию шаблона блога в стиле Web 2.0

Установите в качестве основного такой # 6b3724 цвет и такой # 361b12 для фона, затем включите Gradient Tool (Градиент), (G) и выберите радиальный тип с переходом цветов «От основного к фоновому».

Теперь, нажав и удерживая клавишу Shift, проведите курсором линию от центра верхней части холста влево (или вправо, не важно) до края документа, как показано на рисунке ниже, на котором задан масштаб 50%, чтобы видеть всю картину.
Теперь у вас должно получиться что-то вроде этого:

Шаг 2

Хорошо, идем дальше. Скопируйте слой с градиентом и замените для копии blending mode (режим смешивания) на Soft Light (Мягкий свет). Затем убавьте непрозрачность слоя дубликата до 20% и нажмите Ctrl + E, чтобы объединить его с оригиналом.

Далее укажите такой # 31170f цвет переднего плана и снова возьмите Gradient Tool (Градиент), (G), выбрав на этот раз линейный тип «От основного к прозрачному».

Создайте новый слой и установите blending mode (режим смешивания) Multiply (Умножение), уменьшив Opacity (Непрозрачность) до 35-40%.

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

Вот как должно получиться, когда вы отпустите кнопку мыши (увеличение 50%):

Теперь нужно снова слить слои, нажав Ctrl+ E, и присвоить единому слою имя «Background» (Фон).

Шаг 3

Далее мы займемся верхней оранжевой панелью.

Возьмите инструмент выделения Rectangular Marquee Tool (Прямоугольная область), (M) и в параметрах стиля этого инструмента на панели настроек выберите Fixed Size (Заданный размер), как показано здесь:
Укажите высоту 35 px и ширину по своему усмотрению, а у меня она составляет 750 px. Кликните на холсте, чтобы появилось выделение с заданными размерами. Теперь убедитесь, что на панели настроек выбрана кнопка New Selection (Новая выделенная область), которая показана на рисунке:

Расположите выделение точно по центру и сдвиньте его от верхнего края холста примерно на 10 px, как здесь (масштаб 50%):

Шаг 4

Создайте новый слой, на котором мы заполним наше выделение. Установите в качестве первого такой #e7b905 цвет, а для фона такой #d87a00.

Выберите Gradient Tool (Градиент) линейного типа «От основного к фоновому» и затем на вновь созданном слое залейте выделение градиентом сверху вниз (возможно вам придется для этого увеличить масштаб до 200-300%). Сняв выделение, вы получите такую картину:

Теперь мы можем дать этому слою имя «Top Orange Bar» (Верхняя Оранжевая Панель).

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

Выделив новый слой, нажмите на кнопку Create Layer Mask «Добавить слой-маску» в нижней части палитры слоев, или перейдите в Layer > Add Layer Mask > Reveal All (Слои > Слой-маска > Показать все).

А сейчас давайте добавим нашей панели изюминку, придав ей легкий эффект объема. Установите такой #e7a204 цвет для переднего плана. Затем выберите Gradient Tool (Градиент) линейного типа «От основного к прозрачному». Увеличьте масштаб до 300 -400% и залейте градиентом снизу вверх чуть меньше половины высоты панели, вот так:

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

Шаг 5

Теперь можно нажать Ctrl + E, чтобы слить этот градиентный слой с основным слоем «Top Orange Bar» (Верхняя Оранжевая Панель).

Идем дальше. Нажмите D, чтобы вернуться к цветам по умолчанию, и создайте новый слой над всеми остальными. Затем включите инструмент (Линия), (U), и выберите на панели настроек опцию Fill Pixels (Выполнить заливку пикселов), и Weight (Толщину) 1px.
Теперь, удерживая клавишу Shift (чтобы линия была прямой), проведите линию через весь холст под нижним краем оранжевой панели.

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

А сейчас, немного увеличив масштаб, переставьте слои линий так, чтобы черная линия была сверху и обе прямо под панелью «Top Orange Bar», вот так (масштаб рисунка 400%):
Теперь измените режим смешивания на Soft Light mode (Мягкий свет). Вот что на данный момент у вас должно получиться (масштаб 100%):

Объедините слои линий и назовите новый слой «Inset Orange Bar» (вставка оранжевой панели).

Шаг 6

Создайте новый слой и поместите его в палитре слоев прямо над фоном. Установите такой #602e1e первый цвет и, выбрав Gradient Tool (Градиент) линейного типа «От основного к прозрачному», проведите линию от верхнего края холста примерно на 30px вниз (предварительно увеличив масштаб до 400-500%).

Сделав это вы должны получить такой результат (сравните левую и правую стороны, соответствующие кадрам До и После):

Теперь мы можем слить этот слой с фоновым.

Шаг 7

Хорошо, переходим к блокноту.

Укажите такой #a57e4a цвет и выберите Rounded Rectangle Tool (Прямоугольник со скругленными углами) с радиусом10 px. На панели настроек инструмента можете выбрать либо Fill Pixels (Выполнить заливку пикселов), либо Shape Layers (Слой-фигура), все равно.

Читайте также:  Подскажите пожалуйста, как разыскать скаченный плагин и воспользоваться им? - уроки фотошоп

Теперь создайте новый слой, расположив его выше всех остальных, и нарисуйте скругленный прямоугольник, как на рисунке ниже (масштаб здесь 50%):
Хорошо, а сейчас откройте вкладку Blending Options (Параметры наложения), дважды кликнув на слое в палитре слоев, или перейдя в Layer >Layer Style >Blending Options (Слои > Стиль слоя > Параметры наложения), и добавьте эти настройки:

Шаг 8

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

Давайте назовем этот слой «Notepad-BG» (фон блокнота).

А сейчас выделите его, кликнув по миниатюре в палитре слоев с нажатой клавишей Ctrl. Задайте в качестве первого такой #ffd286 цвет и такой #fcba68 для фона.

Затем создайте новый слой выше всех остальных и, включив Gradient Tool (Градиент), (G), выберите Reflected Gradient (Зеркальный градиент) «От основного к фоновому», затем кликните где-нибудь в середине выделенной области и проведите линию вверх до края контура, вот так:
Теперь снимите выделение и нажмите Ctrl + T, чтобы трансформировать слой. Нам нужно немного сжать страницу слева, справа и снизу, и затем чуть сдвинуть вверх, перекрыв слой «Notepad-BG» (фон блокнота), вот так:

Шаг 9

Сейчас нам нужно придать блокноту объемный вид, потому что рисунок выглядит очень скучным. Для начала добавим Drop Shadow (Тень) вот с такими настройками:

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

Источник: http://www.master-live.ru/Web_2_0/Web_2_0.html

Создаем векторный рисунок в фотошопе

Финальный результат

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

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

Шаг за шагом я продемонстрирую весь процесс и с помощью моих комментариев поясню все этапы.

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

Если Вы хотите нарисовать векторную иллюстрацию, то должны иметь в виду, что для этого используются такие редакторы как Adobe Illustrator или CorelDraw. Вместе с тем, Photoshop располагает достаточными средствами для разработки векторных иллюстраций.

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

Скетч кота, который я использовал в уроке.

Шаг 1

Начнем с создания фона. Нарисуем форму с помощью инструмента выделения Pen Tool («Перо» / Клавиша «P») (в режиме Shape Layers (Слой Фигура)). Настройки — Fill (Непрозрачность заливки) = 0%.

Теперь используем наложение градиента: (Layer Style — Gradient Overlay (Стиль слоя — Наложение градиента)) для заполнения созданной фигуры. Все настройки по умолчанию, вам только нужно менять угол (я буду указывать степень) и градиент.

Добавляем Stroke (Обводку) (Layer Style — Stroke (Стиль слоя — Обводка)). Используем все настройки по умолчанию, кроме ширины в 1 рх и цвета.

Итак. используем Pen Tool («Перо» / Клавиша «P»), в режиме Shape Layers (Слой Фигура). Выделяем весь холст, настройки Fill (Непрозрачность заливки) = 0%, и добавляем градиент (Layer Style — Gradient Overlay (Стиль слоя — Наложение градиента)).

Шаг 2

Раскрашиваем основные части кошачьего тела в синий цвет: нос с ушами, тело, передняя лапа и хвост. Добавляем Stroke (Обводку), чтобы сделать изображение более интенсивным.

Используем цвета с #4f85c8 до #7ab2ee, угол — 50 deg (Градус) для Наложения градиента, и #2d72c5 — цвет Stroke (Обводка).

Шаг 3

Теперь уделим внимание основным элементам тела. Высветлим часть тела, используя тот же градиент, что и для всего тела, с углом 3 deg (Градус).

Шаг 4

Перейдем к деталям хвоста. Выделим весь хвост и заполним его градиентом (68 deg (Градус)). После этого выделим кончик хвоста (как показано на рисунке) и заполним тем же градиентом (75 deg (Градус)).

Шаг 5

Выделим нос, как показано на рисунке, и заполним градиентом (90 deg (Градус)).

Шаг 6

Осветлим кончик носа (-66 deg (Градус)). Используем более темные цвета, чтобы подчеркнуть границы носа.

Шаг 7

Пришло время поработать с общими контурами ушей. Используем угол градиента 66 deg (Градус) для нижнего и 4 deg (Градус) для верхнего уха.

Шаг 8

Придадим форму краю уха: используем угол градиента 16 deg (Градус) для нижнего уха и 34 deg (Градус) — для верхнего.

Шаг 9

Добавим деталей на лапах. Создадим овальную форму верхнего пальца (градиент с углом (35 deg (Градус)), затем для среднего пальца (68 deg (Градус)), и наконец для нижнего (58 deg (Градус)). Каждая последующая форма накладывается на предыдущую.

Шаг 10

Основной корпус готов. Теперь перейдем ко второй нижней лапе. Создадим новую форму (97 deg (Градус)), далее нажмем «Shift+Ctrl+[» (Send to Back (На задний план)), и добавим Stroke (Обводка) c цветом #1d62b5.

Шаг 11

Добавим три круга сверху донизу (25 deg (Градус), 68 deg (Градус), 83 deg (Градус)) для каждого пальца, как и в шаге 9.

Шаг 12

Проделаем все то же, что и с первой нижней лапой. Готово. Теперь обратимся к верхним лапам. Создадим форму для одной из верхних лап (58 deg (Градус)) и добавим Stroke (Обводку) с цветом #4172a5 (как и для всех внешних форм).

Шаг 13

На верхней лапе 4 пальца. Скроем один из них. Создадим форму (50 deg (Градус)).

Шаг 14

Создаем овальную форму для каждого пальца, как в шаге 9 (63 deg (Градус), 67 deg (Градус), 77 deg (Градус)). Добавляем Stroke (Обводка) с цветом #3367a6 для каждого из 3-х пальцев.

Шаг 15

Создадим новую форму для второй лапы (-61 deg (Градус)). Жмем (Ctrl+Shift+]) и добавляем Stroke (Обводка) #2d72c5.

Шаг 16

Для верхнего пальца создаем форму (135 deg (Градус)), затем то же самое проделываем и для остальных пальцев (сверху вниз) — как и в шаге 9 (99 deg (Градус), 83 deg (Градус), 67 deg (Градус)).

Шаг 17

Закончили с основной частью кошачьего тела. Теперь перейдем к мордочке. Начнем с глаз. Создадим новую форму для нижнего века (-168 deg (Градус)), а затем светло-голубую форму — белок глаза (-22 deg (Градус)).

Шаг 18

Теперь нарисуем овальную форму в середине головы (90 deg (Градус)) для радужки глаза, добавим Stroke (Обводка) #599c01. Нарисуем зрачок над радужкой (90 deg (Градус)). Затем создадим маленькую овальную форму для блика. Для градиента используем цвет #ebfcf9.

Шаг 19

Сделаем овальную форму век (94 deg (Градус)), затем форму для ресниц (-173 deg (Градус)). Расположим их по границе века. Нажимаем «Ctrl+[» (Send Backward (Переложить назад)).

Шаг 20

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

Шаг 21

Поработаем с зубами. Создадим новую форму (71 deg (Градус)) и добавим Stroke (Обводка) с цветом #336aaa.

Шаг 22

Создадим форму для нижнего зуба (-122 deg (Градус)). Далее создаем дубликаты слоя с зубом (Ctrl+J) и изменяем их размер, используя инструмент Path Selection Tool (Инструмент «Выделение контура» / Клавиша «A»).

Шаг 23

Создаем форму верхнего зуба (-135 deg (Градус)), и производим те же действия, что и в шаге 22.

Шаг 24

Кот практически готов. Добавим некоторые детали. Подготовим формы для роскошных кошачьих усов: (сверху вниз:-50 deg (Градус), 63 deg (Градус),-50 deg (Градус)).

Шаг 25

И еще 2 нижних уса:

Шаг 26

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

Шаг 27

Последний элемент — цветы в кошачьих лапах. Нарисуем форму стебелька цветка (173 deg (Градус)), как показано на скриншоте, жмем «Shift+Ctrl+[» (Send to Back (На задний план)). Далее создадим форму с лепестками (79 deg (Градус)).

Шаг 28

Создадим еще одну форму для лепестков (94 deg (Градус)), сделаем её чуть больше и разместим чуть выше исходной. Нарисуем сердцевину цветка (76 deg (Градус)), и еще такую же форму (99 deg (Градус)), сдвинув её вверх и вправо на 1 рх.

Вот и все. Наш Кот готов. Как видите, в Фотошопе можно создавать подобным образом векторные изображения чего угодно.

Финальный результат

Перевод: Bagirrra;

Источник: https://photoshoplessons.ru/grafika/sozdaem-vektornyiy-risunok

Красивые WEB 2.0 иконки в фотошопе. Урок

Когда мы делаем Web-проект, нам довольно часто необходимы кнопки/значки/иконки, чтобы показать такие команды, как добавить, удалить, редактировать и прочие. С приходом Web 2.

0, использование значков/иконок и  3D стиля стало очень популярно.

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

Шаг 1

Создайте новый документ и выберите Ellipse Tool (U). Не имеет значения, какой цвет вы используете, поскольку он будет заменен позже стилем слоя.

Шаг 2

Дважды щелкните на слое с эллипсом, чтобы открыть диалоговое окно Layer Style. Затем выберите Gradient Overlay и используйте градиент с синим #00619f и светлым #9ee2ff  оттенком синего цвета. Используйте типа заливки Radial. Затем добавьте эффект Bevel and Emboss, как на скриншотах.

Совет: переместите градиент ближе к верхней части круга. Для этого в открытом окне Layer Style выберете вкладку Gradient Overlay, нажмите и удерживайте кнопку мыши и начните перемещать градиент.

Шаг 3

Продублируем слой с кругом и изменим его размер, чтобы сделать его немного меньше, как на скриншоте, для этого нажимаем Ctrl-T и удерживая клавиши Alt+Shift тянем за край выделения немного вниз.

Читайте также:  Создаем абстрактный коллаж из нескольких изображений - уроки фотошоп

Шаг 4

Дважды щелкните на новом слое, чтобы открыть диалоговое окно Layer Styles. Отмените  предыдущий эффект Bevel and Emboss. Теперь выберите Stroke и тип заливки выберите Gradient. Цвет выберите белый с обоих концов градиента и изменения непрозрачность до 0% вначале и 100% в конце.

Шаг 5

Выберите Horizontal Type Tool (T) и создайте текстовый слой. Убедитесь в том, что этот слой самый верхний. Теперь откройте окно стилей слоя и изменения Color Overlay до белого, выберите Inner Shadow и использовать параметры, как на скриншоте.

Шаг 6

Сгруппируем три слоя и назовем группу синий круг.

Шаг 7

Выберите Polygon Tool (U) и изменить некоторые параметры, как показано ниже, чтобы создать звезду. Продублируйте слой и измените его размер, как мы делали на шаге 3.

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

Для этого, выберите слой, стиль из которго Вы хотите скопировать, щелкните правой кнопкой мыши и выберите Copy Layer Style.

Затем выберите слой, к которому вы хотите применить стиль, щелкните правой кнопкой мыши и выберите Paste Layer Styles.

Единственное, что нам придется менять, это градиент цвета — Gradient Overlay.

Заключение

Это один из самых простых способов создать красивый 3D стиль Web 2.0 кнопки в фотошопе. Вы можете изменить некоторые настройки, такие как stroke’s или   gradient color для создания различных 3D стилей.

Источник: http://labdes.ru/lesson-web20-icons-in-photoshop

Вектор в Фотошопе

С самого начала основания Хронофага я раскрывал покровы работы всех векторных инструментов в Фотошопе.

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

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

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

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

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

С чего начать изучение вектора в фотошопе?

Вот как нужно читать эту статью. Начните с начала. Читайте абзац за абзацем и переходите по специфическим ссылкам. Ссылки будут раскрывать обширные темы работы с вектором в Фотошопе и выстраивать изучение в правильном постепенном порядке.

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

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

Изучение вектора нужно начать с самого вектора. И прежде всего ответить себе на простой вопрос. Зачем в Фотошопе нужен вектор? Ведь Фотошоп программа исключительно растровая.

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

Идеальный векторный контур, а внутри пиксельная заливка.

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

  • Зачем в Фотошопе нужен вектор?

Векторные режимы

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

Почему же это так важно? Бывает, начинающий пользователь выбирает векторный инструмент, а он не рисует. Или рисует, но каким-то тонким контуром, который затем пропадает. Загадки.

Но разгадать их легко, если знать, какой в данный момент режим векторного инструмента активирован.

Всего их три. Это режимы Shape Layer, Path и Fill Pixels. Первый режим — это тот что вам нужен, если вы намерены создавать векторные элементы в Фотошопе. Второй Path создает пустые векторные контуры.

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

Впрочем обо всем это вы узнаете более подробно из статьи:

  • Векторные режимы Shape Layer, Path и Fill Pixels в Фотошопе

Примитивные векторные фигуры в Фотошопе

Начать освоение вектора вы можете уже сейчас с примитивных инструментов Фотошопа для рисования прямоугольников Rectangle Tool, окружностей Ellipse Tool и других простейших инструментов. Что же они делают? Понятно что. Рисуют в векторе простые фигуры.

Какие фигуры можно создать в Фотошопе через вектор, какие у них настройки и возможности? Ответы на эти вопросы вы найдете в статье:

  • Инструменты векторных примитивов в Фотошопе

Произвольные векторные фигуры

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

Называется этот инструмент Custom Shape Tool (произвольная фигура) и находится он в том же ряде инструментов где живут примитивы Rectangle Tool и прочие.

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

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

Режимы совмещения в Векторе

Если вы немного увлекались 3D графикой, то наверняка знаете, что все сложные объекты состоят из простых. Стол состоит из пяти прямоугольников, стул из 7-8-ми. Большая часть объектов представляет из себя совмещение шаров, овалов и кубов и прочих вытянутых или сжатых объектов. Тоже самое происходит с вектором в Фотошопе.

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

Зная об этом мы понимаем, что разные элементы вектора имеют разные режимы совмещения друг с другом. Одни прибавляют, другие вырезают. Какие же режимы совмещения есть в Фотошопе, как ими пользоваться и на их основе создавать более сложные фигуры? Обо всем этом вы узнаете в статье:

  • Режимы совмещения  Add, Subtract, Intersect и Exlude в Фотошопе

Инструменты управления векторными точками

После того, как вы научились превращать простые фигуры в сложные, пора научиться манипулировать с точками и направляющими, из которых состоит векторные фигуры. За управление фигурами и точками отвечают два инструмента, похожих на Move Tool, о которыx и пойдет речь. Разобраться в управлении просто, если прочитать статью:

  • Инструменты Path Selection и Direct Selection Tool в Фотошопе

Инструменты рисования в векторе Pen Tool

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

Инструменты рисования в векторе это инструмент Pen Tool и примыкающие к нему инструменты вроде Freeform Pen Tool, Convert Point Tool и так далее. Все они входят в одну общую группу инструментов. И в этой статье вы найдете подробное описание их возможностей и настроек:

  • Векторные инструменты рисования (Pen Tool, Freeform Pen Tool)

Как рисовать инструментом Pen Tool

Те пользователи, кто взялись за инструмент Pen Tool уже знают, что рисовать им не так просто. Говорят что Pen Tool один из самых сложных инструментов Фотошопа, да и не только Фотошопа.

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

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

Рисовать Пером просто. Главное понять логику его работы, а так же логику устройства векторных кривых вообще. О том как легко рисовать инструментом Pen Tool различные объекты вы узнаете в уроках:

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

Панель настроек вектора в Фотошопе

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

Инструменты рисования, настройки, режимы совмещения. Пора, наконец, пройтись по всей панели настроек в целом и соединить свои знания в одно целое.

Если же вы уже перескочили на последнюю версию фотошопа — Photoshop CS6, то вам будет интересно просмотреть видео уроки об изменениях на панели настроек и новых опциях и возможностях работы с вектором.

  • Векторные фигуры в Фотошопе CS6
  • Пунктирная линия в Фотошопе CS6

Если вы справились со всеми статьями, я вас поздравляю. Теперь вы векторный специалист в программе Фотошоп и знаете о векторе все.

Источник: http://hronofag.ru/2012/07/26/vector-in-photoshop/

Ссылка на основную публикацию