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

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

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