Java, UX, HTML, CSS, WEB-design

Создайте элегантный виджет календаря с помощью Adobe Photoshop всего за 15 минут

Краткое описание по статье Создайте элегантный виджет календаря с помощью Adobe Photoshop всего за 15 минут

Название: Создайте элегантный виджет календаря с помощью Adobe Photoshop всего за 15 минут . Краткое описание: ⭐ Сочетая немного серого, черного и вариаций раз . Дата публикации: 15.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

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

Сколько лет сайту?

Возраст составляет 3 года


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

Дизайн календаря – окончательный результат

Создайте элегантный календарь с помощью Adobe Photoshop за 15 минут

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

Ваш дизайнерский набор инструментов
Неограниченное количество загрузок: более 500 000 веб-шаблонов, наборов иконок, тем и элементов дизайна


Неограниченное количество загрузок: более 500 000 шрифтов, веб-шаблонов, тем и элементов дизайна


Шаг 1

Создайте элегантный календарь с помощью Adobe Photoshop за 15 минут

Мы начинаем наш календарь с создания простой фигуры. Он не должен быть большим, так как он будет использоваться где-то на боковой панели. Выберите размер от 200 до 300 пикселей в высоту, а также от 200 до 300 пикселей в ширину. Для этого проекта я выберу 235 пикселей в высоту и 230 пикселей в ширину. Примените очень тонкую тень, добавив тень в 1 пиксель с непрозрачностью 50%, потому что мы работаем с темно-серым фоном, который не контрастирует с действительно видимой черной тенью.

Шаг 2

Создайте элегантный календарь с помощью Adobe Photoshop за 15 минут

Пришло время создать основу для наших фиников. Это будет довольно просто, даже если это выглядит немного странно. Мы должны создать прямоугольную форму (где-то около 35 пикселей в высоту) и добавить эффект наложения градиента с непрозрачностью 6%.

Это действительно мало, но мы не хотим, чтобы эти коробки выделялись. Они будут просто содержать «цифры», которые будут показывать даты. Так как мы работаем на белом фоне, вам нужно будет сделать 6 белых линий (шириной 2 пикселя), которые будут разделять каждый блок.

Шаг 3

Создайте элегантный календарь с помощью Adobe Photoshop за 15 минут

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

Шаг 4

Создайте элегантный календарь с помощью Adobe Photoshop за 15 минут

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

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

Шаг 5

Создайте элегантный календарь с помощью Adobe Photoshop за 15 минут

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

Шаг 6

Создайте элегантный календарь с помощью Adobe Photoshop за 15 минут

Теперь мы хотели бы сделать действительно видимое разделение между полосами, добавив внутреннюю тень с непрозрачностью 15%. Это действительно почти видимая внутренняя тень, но она имеет значение, если вы посмотрите на общие детали.

Шаг 7

Создайте элегантный календарь с помощью Adobe Photoshop за 15 минут

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

Шаг 8

Создайте элегантный календарь с помощью Adobe Photoshop за 15 минут

Введите и отцентрируйте текущий месяц в тексте вместе с годом в цифрах и задайте ему темно-серый цвет. Я использовал шрифт Helvetica Neue Bold размером 14 пикселей. Примените эффект тени с непрозрачностью 50%.

С помощью инструмента Custom Shape Tool (U) создайте две фигуры, объедините их (CTRL+E), а затем продублируйте и поменяйте местами (CTRL+T). Это укажет предыдущий и следующий месяц.

Шаг 9

Создайте элегантный календарь с помощью Adobe Photoshop за 15 минут

Переходим к нашей пустой серой полосе. Используя шрифт Regular Helvetica Neue размером 12 пикселей, введите сокращенную версию дней недели.

Шаг 10

Создайте элегантный календарь с помощью Adobe Photoshop за 15 минут

С помощью инструмента «Прямоугольник» (U) создайте серую рамку поверх любого «даты-заполнителя» и добавьте эффект внутренней тени с непрозрачностью около 50 процентов, режимом смешивания наложения, размером 10 и расстоянием 3 пикселя.

Шаг 11

Создайте элегантный календарь с помощью Adobe Photoshop за 15 минут

К тому же серому блоку примените более темную серую обводку толщиной 1 пиксель. Это сделает внутреннюю тень более заметной и создаст небольшую границу между выделенным блоком и остальными.

Шаг 12

Создайте элегантный календарь с помощью Adobe Photoshop за 15 минут

Введите все даты текущего месяца, используя Обычный вес Helvetica Neue (12 пикселей). Используя тот же шрифт, мы будем вводить числа для предстоящих дат, а также для последнего дня предыдущего месяца. Установите цвет жирных цифр немного темнее, чем их фон.

Конечный результат

Создайте элегантный календарь с помощью Adobe Photoshop за 15 минут

Нажмите здесь, чтобы загрузить исходные файлы PSD

Вы можете закончить это, создав 2 круглые формы (Используйте Инструмент «Эллипс» (U) и продолжайте удерживать SHIFT для идеального круга).

Установите заливку кругов на ноль, а затем примените темно-серую обводку толщиной 1 пиксель.

Расположите их вокруг фигур «предыдущие-будущие», чтобы немного улучшить их внешний вид.

Этот пост может содержать партнерские ссылки. Смотрите нашу информацию о партнерских ссылках здесь.


Source: 1stwebdisigner

Заключение

Вы ознакомились с статьей — Создайте элегантный виджет календаря с помощью Adobe Photoshop всего за 15 минут

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»