На Вашем компьютере обнаружен устаревший браузер!
(Доступ на сайт будет ограничен)
Советуем Вам скачать новую версию браузера:

Вход на сайт

Рекомендуем ознакомиться со следующими разделами Фотошопа:



Разместите здесь свою рекламу
Главная » Photoshop » Делаем дизайн календаря — веб-приложения для сайта
11.03.2019

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

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

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

Сложность: средняя
Время: до 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-й слой:

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник: http://www.graphisutra.com/tutorials/photoshop/interface-design/design-a-calendar-widget/7

(+3 баллов, 3 оценок)
Loading ... Loading ...
Написать комментарий

Подписаться, не комментируя

.