![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/ramka3.jpg)
Этот урок веб дизайна научит вас, как эффективно создавать необычные иконки и делать дизайн приложений для сайтов.
Навыки для "прокачки":
- создание векторных форм
- стили слоя
- быстрое клонирование объектов
- дублирование стилей слоя
Для уроков от среднего уровня и выше: если возникают вопросы по используемым в уроках инструментам, рекомендуем пройти курс "
Фотошоп с нуля".
Создадим новый документ с размерами 720x450px и цветом фона # 5E5E5E.
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image001.png)
Далее сделаем 2 новых слоя (Ctrl+Shift+N) и назовем их как LPlot и RPlot.
С помощью инструмента Прямоугольник со скругленными углами (Rounded Rectangular Marquee tool) сделайте 2 новые формы в каждом из наших слоев. Размер округления - 20 px, размер формы - 240 px.
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image002.png)
Теперь для каждого из слоев установите настройки:
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image003.png)
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image004.png)
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image005.png)
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image006.png)
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image007.png)
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image008.png)
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image009.png)
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image010.png)
И ваша работа должна выглядеть следующим образом:
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image011.png)
Теперь создадим новый слой и назовем его LInner. Это будет внутренний квадрат.
Создайте еще одну форму размер которой будет меньше - примерно на 8px отходить от внутреннего края большого квадрата.
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image012.png)
Введите Стили слоя (Layer style):
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image013.png)
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image014.png)
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image015.png)
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image016.png)
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image017.png)
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image018.png)
Вот что получится:
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image019.png)
Создадим новый слой и назовем его - "RInner mounth".
Далее сделаем форму, как и предыдущую:
Применим к ней Маску слоя (Layer mask) и отсечем нижнюю часть.
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image020.png)
Для формы применим те же Стили слоя, что и для "RInner mounth".
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image021.png)
Теперь под слоем "RInner mounth" создадим еще один раздел с названием - "RInner week".
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image022.png)
Применим Свойства слоя к нему:
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image023.png)
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image024.png)
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image025.png)
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image026.png)
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image028.png)
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image029.png)
Создадим новую группу слоев (Ctrl+G) и в ней слой "01".
На слое Нарисуем прямоугольник 32x32px.
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image030.png)
Теперь изменим Стили слоя "01". Просто скопируем его из предыдущего слоя, на панели слоев перетащим стили к другим слоям, удерживая Alt:
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image031.png)
Теперь вам нужно расклонировать прямоугольник, чтобы достичь такого эффекта (он должен быть растрирован перед этим). Чтобы сделать это быстро, зажмите Ctrl+Alt+Shift и отведите прямоугольник вправо до края исходного прямоугольника. Далее, на панели слоев выделите эти 2 прямоугольника и, удерживая те же клавиши, переместите вниз скопированные слоя.
Для наглядности мы покажем, как они должны стоять (у вас они будут сплошным серым квадратом):
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image032.png)
Так как у нас не бывает 35 дней в месяц, некоторые нужно будет сделать "неактивными". Для этого изменим Стили слоя для тех слоев).
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image033.png)
По сути, у нас будет изменен только цвет на #757575:
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image034.png)
Примените этот Стиль на эти квадраты:
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image035.png)
Наши основные слои созданы. Мы будем создавать новые формы, которые будут дополнять календарь.
Для начала, создадим новый слой с названием "BedSpring B01".
Нарисуем прямоугольник 20x05px:
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image036.png)
Дублируйте этот слой (Ctrl+J). Далее, нажмите команду Ctrl+T (трансформация) и переместите прямоугольник вниз 8px. Нажмите Ctrl+Alt+Shift+T 14 раз. Получится пружинка.
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image037.png)
Определите такие Стили слоя на 1-й слой:
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image038.png)
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image039.png)
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image040.png)
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image041.png)
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image042.png)
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image043.png)
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image044.png)
Получится так:
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image045.png)
И далее скопируйте Стили слоя на все остальные слои (для удобства можно было Стили слоя применить перед клонированием ;)).
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image046.png)
Последним шагом будет размещение текста. Примените навыки, полученные в уроке, чтобы создать для него нужный объем:
![Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп Делаем дизайн календаря - веб-приложения для сайта - уроки фотошоп](/uploads/2012/03/image047.png)
Вот и все, этот урок веб дизайна окончен! Поздравляем! :)