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

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

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

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

Добавить комментарий

Кликните на изображение чтобы обновить код, если он неразборчив
  • Яндекс.Метрика