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

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

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

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

Создадим новый документ с размерами 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-й слой:















Получится так:


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



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



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