Делаем дизайн календаря - веб-приложения для сайта 1

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп


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



Навыки для "прокачки":


- создание векторных форм
- стили слоя
- быстрое клонирование объектов
- дублирование стилей слоя


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

Создадим новый документ с размерами 720x450px и цветом фона # 5E5E5E.

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Далее сделаем 2 новых слоя (Ctrl+Shift+N) и назовем их как LPlot и RPlot.
С помощью инструмента Прямоугольник со скругленными углами (Rounded Rectangular Marquee tool) сделайте 2 новые формы в каждом из наших слоев. Размер округления - 20 px, размер формы - 240 px.

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Теперь для каждого из слоев установите настройки:

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

И ваша работа должна выглядеть следующим образом:

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Теперь создадим новый слой и назовем его  LInner. Это будет внутренний квадрат.
Создайте еще одну форму размер которой будет меньше - примерно на 8px отходить от внутреннего края большого квадрата.

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Введите Стили слоя (Layer style):

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Вот что получится:

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Создадим новый слой и назовем его - "RInner mounth".

Далее сделаем форму, как и предыдущую:

Применим к ней Маску слоя (Layer mask) и отсечем нижнюю часть.

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Для формы применим те же Стили слоя, что и для "RInner mounth".

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Теперь под слоем "RInner mounth" создадим  еще один раздел с названием - "RInner week".

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Применим Свойства слоя к нему:

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Создадим новую группу слоев (Ctrl+G) и в ней слой "01".

На слое Нарисуем прямоугольник 32x32px.

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Теперь изменим Стили слоя "01". Просто скопируем его из предыдущего слоя, на панели слоев перетащим стили к другим слоям, удерживая Alt:

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Теперь вам нужно расклонировать прямоугольник, чтобы достичь такого эффекта (он должен быть растрирован перед этим). Чтобы сделать это быстро, зажмите Ctrl+Alt+Shift и отведите прямоугольник вправо до края исходного прямоугольника. Далее, на панели слоев выделите эти 2 прямоугольника и, удерживая те же клавиши, переместите вниз скопированные слоя.
Для наглядности мы покажем, как они должны стоять (у вас они будут сплошным серым квадратом):

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Так как у нас не бывает 35 дней в месяц, некоторые нужно будет сделать "неактивными". Для этого изменим Стили слоя для тех слоев).

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

По сути, у нас будет изменен только цвет на #757575:

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Примените этот Стиль на эти квадраты:

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Наши основные слои созданы. Мы будем создавать новые формы, которые будут дополнять календарь.
Для начала, создадим новый слой с названием "BedSpring B01".
Нарисуем прямоугольник 20x05px:

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Дублируйте этот слой (Ctrl+J). Далее, нажмите команду Ctrl+T (трансформация) и переместите прямоугольник вниз 8px. Нажмите Ctrl+Alt+Shift+T 14 раз. Получится пружинка.

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Определите такие Стили слоя на 1-й слой:

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Получится так:
Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

И далее скопируйте Стили слоя на все остальные слои (для удобства можно было Стили слоя применить перед клонированием ;)).

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

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

Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп

Вот и все, этот урок веб дизайна окончен! Поздравляем! :)

Сайт: Stadion-Kuban.ru

Виджет на Яндексе: yandex.ru/?add=111794

Мы ВКонтакте: vk.com/Stadion-Kuban

И в Твиттере: twitter.com/Stadion-Kuban

Информация
Автор / Разработчик
Автор не указан
Перевел
Автор перевода не указан
Сложность
Средняя
Источник
Добавил
Yara
Дата
11-03-2020, 21:49
Метки:  еще статьи

Поделиться ссылкой

Прямая ссылка:
BB-code ссылка:
HTML ссылка:

Комментарии (0)

Имя
Эл. почта
Комментарий
Вопрос: 1 + 1 =

Для активации данной функции необходимо зарегистрироваться и авторизоваться на сайте.

Ваш IP: 204.236.235.245
Последние уроки
Вконтакте
Архив сайта