Содержание
Объемная кнопка в фотошопе, интересный урок
/ Сергей Нуйкин / Уроки по фотошопу
Всем доброго времени суток, рад видеть на fotodizart.ru. Сегодня поговорим о такой важной мелочи как кнопка, а точнее как создается кнопка в фотошопе.
Кнопка может быть разного назначения и применения к примеру для сайта, программного интерфейса. Кнопка для сайта или интерфейса, если следовать всем правилам должна иметь 3 — 4 состояния. Почему спросите три или четыре это зависит от того будут ли какие-то состояния кнопки совпадать, а также имеется ли необходимость в четвертом состояние.
На сегодняшний день не везде используются все состояния кнопок, а ведь это не совсем правильно. Все состояния делаются для того чтобы пользователю было легко ориентироваться в работе с интерфейсом. Говоря простым языком, кнопка при каком либо действие пользователя показывает, что происходит и указывает на соответствующее действие.
Кнопка в фотошопе разрабатывается не сложно, давайте все же определимся, что же такое кнопка.
Кнопка – это элемент управления, который реагирует на то или иное действие пользователя.
Давайте рассмотрим эти четыре состояния:
- Статичное состояние — это состояние кнопки, при котором пользователь не производит никакого действия с ней.
- Наведение — это состояние кнопки, при котором пользователь навел на нее курсор мыши.
- Нажатие — это состояние кнопки, при котором пользователь нажал на нее.
- Активная – это состояние кнопки при котором она является выделенной и показывает пользователю где он находится (обычно это используется для того чтобы пользователь понимал свое место нахождения к примеру на какой странице сайта он находится).
Что такое кнопка и какие у нее бывают состояния мы разобрались. Приступим к созданию кнопки в фотошопе, а точнее кнопки и ее четырех состояний.
Открываем фотошоп, создадим новый документ с нужными нам размерами, фон желательно залить цветом нашего интерфейса, для которого мы ее создаем, это делается для того чтобы наглядно видеть как она будет смотреться в работе.
И начинаем создание кнопки в фотошопе. Возьмем инструмент прямоугольник со скругленными краями, и создадим форму нашей будущей кнопки.
При помощи стиля слоя зальем форму кнопки линейным градиентом для этого идем слои > стиль слоя > наложение градиента либо дважды кликнем по слою с формой кнопки.
Создадим объем и тень для нашей кнопки при помощи копирования нашего слоя. Для этого, перетащите наш слой с кнопкой на пиктограмму (иконку) создать новый слой, либо сделайте наш слой с кнопкой активным после чего идем в слой > создать дубликат слоя. Проделаем это действие дважды. После чего назовем слои кнопка, объем, тень. После чего кликнем на слое тень правой кнопкой мыши и отчистим стиль слоя, проделаем тоже самое со слоем объем. Затем поменяем цвет у слоя объем. И сдвинем слои вниз при помощи инструмента перемещение (V).
Чтобы кнопка была более объемна, создадим немного свечения и контур, сделаем мы это через внутреннее свечение в стиле слоя. Зададим цвет для свечения.
Теперь доработаем слой с тенью. Идем слой > растрировать. Уменьшаем непрозрачность до 13% . Далее применим фильтр размытие по гауссу, с параметрами как показано на скрине ниже.
Кнопка в фотошопе практически готова, осталось добавить надпись на кнопку, подробнее о работе с текстом читайте в статье работа с текстом photoshop. Для этого возьмем инструмент горизонтальный текст выберем нужный шрифт и напишем необходимую нам надпись.
Теперь сделаем текст вдавленным, а также создадим блик и контур на краях надписи, все это мы сделаем через стили слоя.
Кнопка в фотошопе нарисована.
Итоговый результат можно увидеть выше, теперь сделаем остальные состояния для нашей кнопочки.
Первым делом заключим созданную кнопку в группу слоев и назовем группу статичное состояние. Для этого зажмем кнопку Shift и выделим все слои кроме фона, затем нажмем Ctrl+G и переименуем группу. Продублируем группы для остальных состояний кнопки, для этого идем слои > дубликат группы и даем название состояния кнопки. Расположим группы ниже по порядку, для этого выделим инструмент перемещение (V) выделяем группу и нажимаем на стрелку вниз на клавиатуре.
Теперь изменим каждую группу под нужное нам состояние. Первой будем изменять группу наведение. Для этого в группе слоев с именем наведение выделим слой кнопка и отредактируем стиль слоя. В нем мы отредактируем только наложение градиента, сделаем его светлее.
Далее отредактируем состояние кнопки при нажатие.
У этой кнопки отредактируем наложение градиента как и в предыдущем состояние, также нужно поставить галочку на инверсия плюс уменьшим объем за счет чего у нас создастся впечатление что при нажатие кнопка вдавливается. Чтобы уменьшить объем нам придется выделить слои объем и тень, так как наша тень также станет меньше, и при помощи инструмента перемещение (V) стрелочкой на клавиатуре поднимем их вверх.
И наконец, сделаем кнопку в активном состояние. Для этого необходимо изменить цвет наложения градиента как у кнопки наведение, а также убрать тень и объем как у кнопки нажатие. Как это сделать мы уже знаем, скажу только, что активной кнопке градиент нужно задать другого цвета, чтобы она была заметна на фоне остальных кнопок. Можно конечно поменять еще и цвет у нашей надписи, но я этого делать не буду.
Вот и все наша кнопка в фотошопе создана, я думаю урок достаточно понятный, если у вас возникнут вопросы пишите в комментариях, по возможности постараюсь ответить.
Не забудьте подписаться на рассылку, чтобы узнавать о новых статьях первыми. А еще Вы можите почитать урок по созданию дизайна кнопки социальных сетей.
Как создать металлическую кнопку в Photoshop
Автор Дмитрий Евсеенков На чтение 3 мин Просмотров 198
Обновлено
Прежде всего хочу сказать, что подобную работу рентабельнее выполнять в векторном редакторе, наподобие Adobe Illustrator или CorelDraw, чем в растровом редакторе Photoshop.
Но что делать, если под рукой нет векторного редактора, а работу надо выполнить прямо сейчас? Другого выхода, кроме как применить старый добрый Photoshop, нет. Но и в Photoshop нарисовать кнопку, имеющую эффект металлической поверхности, вовсе не трудно.
Вот что получилось у меня за пять минут работы:
Нарисовать металлическую кнопку с эффектом нажатия мне понадобилось для создания интерфейса бесплатного андроид-приложения «Фонарик», установить которое вы можете по этой ссылке, заодно и посмотреть, как на практике можно применить созданное в Photoshop изображение.
Описание приложения здесь.
Давайте приступим.
Открываем Photoshop, создаём новый документ размером 500 на 500 пикселей или какой вам больше нравится. Размеры документа в последствии можно будет изменить без потери качества, т.к. для создания мы будем использовать векторные инструменты и стили слоя.
Ставим две направляющие точно по центру документа. Берём инструмент «Эллипс», задаём режим «Фигура» (Snape), цвет заливки серый #8f8f8f. Наводим курсор точно в перекрестье направляющих, зажимаем левую клавишу мыши и начинаем тащить курсор в любом направлении от центра. После того, как вы начали протаскивать курсор, зажмите клавиши Alt и Shift, центр построения эллипса переместится в перекрестье курсора, а сам эллипс станет геометрически правильным кругом. Таким образом постройте фигуру в форме круга. Когда закончите, сначала отпустите левую клавишу мыши, и только потом клавиши Alt и Shift. Таким образом, у нас должно получиться что-то вроде этого:
Построение фигуры эллипса.
Это будет передняя плоская поверхность кнопки. Чтобы она была похожа на металлическую, необходимо добавить стиль слоя «Наложение градиента» со следующими настройками:
Обращаю внимание, что стиль градиента — «Угловой» (Angle). Цвета чередуются — чисто белые с серыми разных оттенков.
Результат:
Металлический градиент на кнопке.
Дублируйте слой с эллипсом и переместите полученный дубликат под исходный слой (у меня дубликат назван Эллипс 1 копия). Примените к дубликату команду «Свободное трансформирование» (Ctrl+T), зажмите клавиши Alt+Shift и несколько увеличьте диаметр фигуры, потянув за любой из углов рамки:
Создание основы кнопки.
Примените к нему также стиль слоя стиль слоя «Наложение градиента», но настройки в этот раз будут другими, стиль градиента — зеркальный, чередуются чёрный и белые цвета:
Добавление зеркального градиента к основе кнопки.
Результат должен быль следующим:
Две слой-фигуры с градиентами.
Дублируйте слой Эллипс 1 копия, у меня он назван Эллипс 1 копия 2 и переместите его под Эллипс 1 копия. Увеличьте его диаметр «Свободным трансформированием», чтобы документ выглядел примерно так:
Дублирование слой-фигуры.
К этой слой-фигуре мы добавим два стиля слоя — «Тиснение» и «Обводка» со следующими настройками:
Результат:
В следующем уроке мы нарисуем значок включения/выключения и зададим кнопке текстуру.
Скачать материалы к уроку:
1 PSD, 1 PNG | 1,54 Мб
Скачать с Яндекс.Диск
Как одеть рубашку на пуговицах Манекены
Исследуйте книгу Купить на Amazon
Рубашка с расстегнутыми пуговицами сегодня висит у каждого в шкафу. Для парней это стандартная одежда во многих офисах и базовая вещь в гардеробе почти каждой женщины. Маленькие мальчики носят рубашку на пуговицах с галстуком по случаю переодевания, а маленькие девочки могут носить ее под нарядным джемпером или с юбкой.
Рисуем классическую женскую блузку.
Нарисуйте легкий рисунок верхней половины женщины. Нарисуйте кривую линию шеи. Добавьте два маленьких перевернутых треугольника для воротника. Нарисуйте слегка смещенную от центра линию, которая идет вниз спереди.
Удлините изгиб и воротник вокруг шеи сзади, чтобы создать ощущение глубины. Поместите линию открытия переда рубашки немного правее центра, потому что пуговицы будут располагаться слева от линии.
Для швов проймы нарисуйте небольшие изгибы от подмышек к плечам. Для каждого бокового шва нарисуйте линию, которая следует по бокам ее туловища и заканчивается на ее бедре. Нарисуйте рукава для каждой руки и добавьте манжеты. Завершите рубашку, добавив пуговицы с левой стороны центрального отверстия спереди и отстрочив по краю.
Нарисуйте мужскую рубашку на пуговицах.
Нарисуйте верхнюю половину парня. Карта в изгибе декольте и V-образной формы.
У вас получится V-образная форма, потому что верхняя пуговица расстегнута.
Поместите пуговицы по центру спереди и проведите линию слева от пуговиц. Следуйте за телом, когда рисуете плечи, пройму и боковые швы. Нарисуйте линию, соединяющую точки воротника с изогнутым вырезом, создавая форму треугольника с каждой стороны.
Добавьте рукава и нижний край. Закончите манжетами, еще одной линией шва рядом с пуговицами и отстрочкой. Включите карман на передней части рубашки, если хотите. Вы также можете добавить верхнюю пуговицу слева и петлю справа.
Нарисуйте клетчатую фланелевую рубашку для мальчика.
Нарисуйте верхнюю половину мальчика. Наметьте рубашку, начиная с отверстия для шеи, и добавьте два треугольника для воротника. Нарисуйте свободные рукава на руках мальчика. Несмотря на то, что фланелевые рубашки сделаны из повседневной ткани, они имеют структуру классической рубашки, поэтому не забудьте добавить манжеты.
Нарисуйте два длинных прямоугольника для передней части рубашки. Если ваша модель носит фланелевую рубашку поверх футболки, вы можете оставить немного места между прямоугольниками, чтобы фланелевая рубашка казалась открытой. Если он застегнул рубашку, нарисуйте прямоугольники так, чтобы они соприкасались по центральной линии переда.
Добавьте пуговицы и острием карандаша нарисуйте узор пледа. Если рубашка расстегнута, нарисуйте пуговицы с правой стороны правого прямоугольника. Если рубашка застегнута, нарисуйте пуговицы справа от центральной линии переда.
Во многих случаях клетчатый рисунок на карманах рубашки не совпадает с рисунком на основной части рубашки. Дизайнеры часто развлекаются и поворачивают плед под углом, чтобы сделать изюминку!
Об этой статье
Эта статья из книги:
- Модный рисунок для чайников ,
Об авторах книги:
Марианна Эган преподает модную иллюстрацию и дизайн, конструирование одежды и многое другое.
Лиза Смит Арнольд преподает искусство и рисунок, в том числе фэшн-иллюстрацию, в муниципальном колледже Норуолка. Она также работала творческим координатором и модным редактором в нескольких крупных изданиях.
Этот артикул можно найти в категории:
- Модный рисунок,
Как нарисовать рубашку поэтапно
от easylinedrawing
В этом уроке показано, как нарисовать классическую рубашку за шесть шагов. Он содержит простые примеры и простые объяснения процесса рисования.
Рисунок рубашки шаг за шагом
Примеры в этом уроке имеют простой дизайн, который очень характерен для рубашек этого типа. Вы можете увидеть предварительный просмотр шагов рисования для него выше.
Начните урок карандашом и нарисуйте легкие линии, которые легко стереть, если вам нужно внести исправления. Позже вы можете затемнить их черной ручкой/маркером.
Чтобы нарисовать футболку, см.
:
Как нарисовать футболку шаг за шагом
Шаг 1. Нарисуйте воротник рубашки
Рисунок воротника рубашки
Начните с рисования воротника рубашки.
Рисование воротника рубашки шаг за шагом
Вы можете увидеть шаги рисования для него в примере выше.
Начните с наброска его верха. Затем нарисуйте боковые стороны, затем нижнюю часть внутреннего контура, а затем верхнюю часть. Вы также можете соединить две стороны воротника короткой линией.
Шаг 2. Нарисуйте «Жилет»
Рисунок контура рубашки
Выйдя из воротника, добавьте плечи, затем бока и низ основной части рубашки. На этом этапе он должен выглядеть как жилет, когда закончите.
Шаг 3. Нарисуйте рукава
Рисунок рукавов рубашки
Добавьте пару рукавов, выходящих с каждой стороны «жилетки» из предыдущего шага. Будьте осторожны, чтобы не сделать их слишком длинными, так как вы также захотите добавить манжеты на следующем шаге.
Шаг 4. Нарисуйте манжеты
Чертеж манжет рубашки
В нижней части каждого рукава добавьте манжету.
Манжеты сделайте достаточно короткими по длине и чуть уже рукавов.
Шаг 5. Нарисуйте пуговицы и завершите рисование линий
Рисование линий рубашки
Завершите рисование линий, сначала добавив полосу, идущую по середине рубашки. Вы можете нарисовать его всего двумя линиями. Затем добавьте ряд пуговиц, проходящих через середину этой полосы (старайтесь, чтобы они располагались на одинаковом расстоянии друг от друга).
Наконец, когда закончите, обведите кнопки по линиям всего рисунка тонким черным маркером или черной ручкой. Если у вас его нет, вы можете затемнить линии карандашом.
Шаг 6 – Раскрашивание рубашки
Рисунок рубашки
Чтобы раскрасить рубашку, вы можете сделать ее практически любого цвета. В данном случае это будет синий цвет (довольно распространенный для классических рубашек). Вы также можете добавить немного более темного градиента, идущего от внутренней части воротника, так как эта область обычно имеет тень. Кнопки можно оставить белыми.