Всем привет! Хочу попросить прощения у Вас, дорогие мои читатели за то, что довольно редко пишу на блоге, время катастрофически не хватает, т. к. учусь я сейчас в 11-том классе и параллельно с ведением блога также стараюсь успевать в учении уроков и подготовке к экзаменам, так что не обессудьте меня.
Ну, а теперь давайте плавно перейдем непосредственно к теме сегодняшнего урока, а именно к созданию дизайна кнопки «Связаться со мной (ContactMe)». Это очень простой урок, который отлично подойдет новичкам для изучения новых техник работы в фотошопе.
Итак, давайте приступим!
Для выполнения данного урока Вам нужно скачать шрифт, который мы будем использовать в нашей работе.
Конечный результат:
Шаг 1
Создайте новый документ размером 200px * 200px с белым фоном и расширением 72 пикс./дюйм – обратите внимание на то, что настоящий размер кнопки мы будем делать далее.
Сейчас я покажу Вам одну маленькую хитрость: нажмите комбинацию клавиш Ctrl+R, чтобы включить отображение линеек. Далее щелкните по линейке и перетащите направляющие к краям нашего холста. У вас должен получиться результат как на изображении ниже:
Нажмите комбинацию клавиш Ctrl+Alt+C, чтобы вызвать окно изменения размера холста, далее примените следующие настройки:
У Вас должен получиться следующий результат:
Таким образом, у нас получилась отличная заготовка из направляющих для кнопки размером 200px * 200px.
Шаг 2
Теперь давайте подготовим простенький фон для нашей работы. В качестве фона я подготовил красивый градиент серого цвета. Итак, выберите инструмент Градиент и залейте фоновый слой как показано ниже:
Создайте новый слой и назовите его «подсветка». Далее с помощью большой и маленькой круглых мягких кистей сделайте два одиночных клика в местах как показано ниже: (вверху и в центре)
Измените размер, и положение данного слоя как показано ниже:
Итак, у нас получился красивый фон для нашей кнопки J.
Шаг 3
Теперь выберите инструмент Прямоугольник со скругленными углами(U) и установите радиус в 10px. Далее нарисуйте основу нашей кнопки в соответствии с направляющими (см. изображение ниже):
Назовите этот слой «Кнопка BG» и примените к нему следующие стили слоя:
Тень
Наложение градиента
Обводка
Итак, вот, что у нас получилось после применения стилей слоя:
Шаг 4
Сейчас давайте добавим немного светов и теней к фону нашей кнопки. Создайте новый слой под слоем «Кнопка BG». Затем для создания выделения как на изображении ниже используйте инструмент Прямоугольная область:
Назовите данный слой «Тень» и примените к нему фильтр Размытие по Гауссу с такими настройками. Примечание: Перед тем как применять фильтр убедитесь, что Вы сняли выделение.
Трансформируйте немного верхнюю часть тени и измените непрозрачность этого слоя на 30%, у Вас должен получиться следующий эффект:
Создайте новый слой и назовите его «Подсветка». Далее возьмите белую мягкую кисть и сделайте одиночный клик мышью в верхней части слоя «Кнопка BG», измените режим наложения данного слоя на Перекрытие.
Дублируйте этот слой и измените режим наложения дублированного слоя на Нормальный. Трансформируйте данный слой до очень тонкого и расположите его непосредственно над верхней частью слоя «Кнопка BG» (см. скриншот):
Шаг 5
Теперь давайте добавим конверт к нашей кнопке. Создайте новый слой поверх всех остальных слоев, выберите инструмент Прямоугольник и нарисуйте им небольшой прямоугольник как показано ниже:
Назовите данный слой «Конверт» и примените к нему следующие стили слоя:
Тень
Внешнее свечение
Обводка
После применения данных стилей у Вас должен получиться следующий эффект:
Шаг 6
Теперь давайте добавим остальные части конверта, что сделает его более реалистичным. Создайте новый слой и назовите его «Верх конверта». Затем выберите инструмент Многоугольник:
Примените следующие настройки: (Стороны: 3)
И нарисуйте треугольник как показано ниже, используя инструмент Свободная трансформация, поместите его на конверте:
Примените следующие стили слоя к слою с треугольником:
Тень
Внутренняя тень
Наложение градиента
Обводка
Итак, у Вас должен получиться примерно такой эффект:
Дублируйте данный слой и переименуйте продублированный слой на «Низ конверта». Нажмите комбинацию клавиш Ctrl+T, чтобы вызвать режим свободной трансформации и отразите его по вертикали:
Все стили слоя, кроме стиля Обводка, оставьте, поместите нижний треугольник, как показано ниже:
Создайте новый слой между слоями «Верх конверта» и «Низ конверта». Возьмите мягкую круглую кисть черного цвета и сделайте одиночный щелчок в центре конверта:
Шаг 7
Итак, мы уже почти закончили делать нашу кнопку. И наконец, давайте добавим надпись «Связаться со мной (ContactMe)» на нашу кнопку. Используйте шрифт, который Вы скачали вначале данного урока.
Как Вы заметили, я использовал темно-красный цвет для текста, причина этому мое желание создать некий эффект тиснения. Весь трюк в том, что мы применяем более темный цвет для шрифта, нежели для фона, также хочу заметить, что после применения стилей слоя эффект станет еще более заметным.
Поэтому давайте добавим следующие стили слоя:
Внутренняя тень
Наложение градиента
Обводка
Здесь тоже есть одна маленькая хитрость – при добавлении обводки выберите цвет немного светлее фонового, это сделает акцент внимания на эффекте тиснения.
Конечный результат:
И вот мы подошли к концу нашего урока. Сегодня Вы научились создавать кнопку «Связаться со мной (ContactMe)», надеюсь, Вам понравился данный урок, если Вам было что-то непонятно – задайте свой вопрос в комментариях.
Спасибо за внимание! До новых встреч!
Автор: PsdVault;
Переводчик: Сергей Заставный
Теги:дизайн кнопка для сайта создание дизайна кнопки для сайта эффект