1 Star2 Stars3 Stars4 Stars5 Stars
| 3 Июл 2010 | комментария 2

Дизайн в Photoshop: Как создать книжную полку в стиле iBooks для Apple iPad

В этом уроке фотошоп Вы научитесь создавать книжную полку, как в планшетном компьютере I-Pad от Apple, на которой располагаются электронные книги купленные App Store. Выполняя все шаги урока, Вы также научитесь создавать с нуля текстуру древесины. Урок простой, но очень длинный, поэтому наберитесь терпения и вперед!

Окончательное изображение

Для начала, как всегда, создайте новый документ размером 768х1030px.

Создайте новый слой и назовите его Задняя стенка. Залейте его любым цветом. Теперь установите основной цвет #e0ad5e, а цвет фона #eec375. Затем примените фильтр Filter > Render > Fibers с параметрами Varience: 15 и Strength: 25. А после этого примените фильтр Filter > Blur > Motion Blur с параметрами Angle: 90 и Distance: 100 pixels.

Вот, что должно получиться:

Теперь нажмите Ctrl+T, чтобы перейти в режим свободной трансформации. И установите настройки, как на рисунке:

Создайте дубликат слоя Задняя стенка, нажав Ctrl+J, и переместите дубликат вправо. Затем нажмите Ctrl+E, чтобы склеить слои.

Затем откройте фильтр Filter > Liquify, выберите инструмент Turbulence Tool с настройками Brush Size: 60, Brush Density: 100, Brush Pressure: 70, Brush Rate: 100 и Turbulent Jitter: 100. И сделайте несколько вертикальных мазков сверху вниз.

Теперь необходимо добавить тень. Щелкните два раза мышью по слою Задняя стенка и примените стиль слоя Inner Shadow.

Теперь необходимо добавить направляющую. Есть очень удобная техника, которая позволяет не сидеть с калькулятором и высчитывать координаты необходимых Вам направляющих. А делается все просто. Например, если Вам необходимо создать направляющие, отступающие от обоих краев изображения на определенное количество пикселей, то Вы создаете прямоугольную область выделения необходимой ширины, располагаете ее сначала слева, щелкаете по линейке и, не отпуская клавишу мыши, тянете к краю выделения. В таком случае направляющая автоматически «привяжется» и будет находиться в нужном месте. Также необходимо будет поступить и с другим краем изображения. В данной технике используется свойство привязки к сетке Snap, о которой Вы можете немного прочитать в этом уроке фотошоп.

Так и здесь, выберите инструмент Rectangular Marquee Tool, установите стиль Fixed Size и размеры 64х64px. Создайте область выделения и переместите к верхнему краю изображения. Создайте направляющую.

Для того, чтобы создать верхнюю часть шкафа, Вам необходимо создать прямоугольную область выделения размером 128х768px. Расположите ее посередине изображения, активируйте слой Задняя стенка, нажмите Ctrl+C, чтобы скопировать изображение дерева, и Ctrl+V, чтобы вставить его в новый слой. Назовите получившийся слой Верх. Теперь нажмите Ctrl+T и разверните изображение на 90 градусов. Расположите слой в самом верху изображения.

Теперь создайте новый слой над слоем Верх. Выберите инструмент Line Tool с настройками ниже.

Установите основной цвет #c9984d и, удерживая клавишу Shift, нарисуйте 13-17 горизонтальных линий, как на рисунке:

Теперь примените Filter > Liquify. Выберите инструмент Twirl Clockwise с настройками: Brush Size: 130, Brush Density: 50, Brush Pressure: 15 и Brush Rate: 80. И просто начинайте водить кистью слева направо, справа налево, вдоль линий. В итоге у Вас должно получиться что-то подобное:

Нажмите Ctrl+E, чтобы склеить слой с слоем Верх. Теперь добавьте шума Filter > Noise > Add Noise с параметрами Amount:  2%, Distribution: Uniform и галочкой на Monochromatic. Нажмите Ctrl+T и сожмите слой до горизонтальной направляющей, как на рисунке:

Затем добавьте слить к слою Верх Gradient overlay:

Удерживая клавишу Ctrl, щелкните по иконке слоя Верх. Создайте новый слой под слоем Верх и назовите его Верх-тень. Залейте область выделения цветом #552200. Снимите выделение, нажав Ctrl+D, и примените фильтр Filter > Blur > Gaussian Blur с параметром Radius: 40 pixels. Выберите инструмент Move Tool и 40 раз нажмите стрелку вниз.

Теперь необходимо, как и раньше, добавить две вертикальные и одну горизонтальную направляющую. Для этого выберите инструмент Rectangular Marquee Tool с размерами Width: 20px и Height: 177px. Создайте область выделения, расположите ее сначала слева – создайте направляющую, потом справа – создайте направляющую и создайте горизонтальную направляющую ориентируясь на низ выделения.

Снимите выделение Ctrl+D. Создайте новый слой над слоем Задняя стенка и назовите его Боковые стенки. Поменяйте режим выделения на Normal и создайте области выделения слева и справа по направляющим. Залейте области выделения цветом #552200. И снимите область выделения, нажав Ctrl+D. Установите непрозрачность Opacity слоя на 70%, а режим наложения Blend Mode на Multiply.

Снимите выделение. Создайте новый слой над слоем Боковые стенки и назовите его Боковые углы. Выберите инструмент Line Tool. Настройки Mode, если Вы не меняли их с начала урока, должны остаться Fill Pixels, установите толщину линии 2px. Создайте две черные вертикальные линии на стыке боковых стенок и задней стенки. Затем примените фильтр Gaussian Blur с радиусом 1,5.

Итак, каркас есть, теперь необходимо создать полки. Выберите Rectangular Marquee Tool и установите размер Width: 768px и Height: 14px. Создайте область выделения как на рисунке:

Активируйте слой Верх, скопируйте изображение Ctrl+C и вставьте его в новый слой Ctrl+V. Назовите слой Полка 1. Переместите изображение к нижней горизонтальной направляющей.

Затем необходимо создать тень для полки. Активируйте слой Верх-тень. Выберите инструмент Rectangular Marquee Tool и создайте область выделения как на рисунке:

Опять же нажмите Ctrl+C и Ctrl+V. Назовите новый слой Полка-тень и переместите его под изображение полки, чтобы получилось вот так:

Выберите Rectangular Marquee Tool и установите высоту 10px. Создайте область выделения над полкой и создайте новую горизонтальную направляющую.

Активируйте слой Верх. Создайте область выделения как на рисунке.

Затем скопируйте и вставьте изображение в новый слой. Назовите его Полка-верх. Теперь нажмите Ctrl+T, измените высоту слоя и расположите его, как на рисунке:

Теперь нажмите Ctrl+L. Установите Shadow Input Level на 50 и нажмите ОК. Затем нажмите Ctrl+U и установите Saturation на -15, а Lightness на -5. И примените стиль слоя Gradient overlay.

Теперь выберите Edit > Transform > Perspective и перетащите левый и правый верхние углы слоя к стыкам между боковыми стенками и задней стенкой.

Опять же, выберите Rectangular Marquee Tool с параметром Height: 194 pixels. Создайте область выделения, как на рисунке. Установите новую горизонтальную направляющую по нижнему краю выделения.

В панели слоев выберите слои Полка 1, Полка-верх и Полка-тень, и нажмите Ctrl+E, чтобы склеить их. Затем создайте дубликат слоя Полка 1 и назовите его Полка 2. С помощью инструмента Move Tool переместите его вниз к направляющей.

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

Создайте новый слой и назовите его Полка-тень. Выберите инструмент Line Tool с толщиной линии 1px. Нарисуйте черные горизонтальные линии на всех полках, как показано на рисунке:

И примените фильтр Filter > Blur > Gaussian Blur с радиусом 2.

Теперь необходимо удалить все лишнее. Для этого, удерживая клавишу Ctrl, щелкните по слою Боковые стенки. Затем, удерживая Ctrl+Alt, щелкайте по слоям Полка 1 и т.д. Активируйте слой Полка-тень. Нажмите Backspace, чтобы очистить ненужные части линий.

Создайте новый слой над слоем Задняя стенка и назовите его Доски. Нажмите D, чтобы установить стандартные цвета и примените фильтр Filter > Render > Clouds.

Затем Filter > Pixelate > Mosaic с параметром Cell Size: 100.

И наконец, Filter > Blur > Motion Blur с параметрами Angle: 90 градусов и Distance: 999 px.

Теперь нажмите 3 раза Ctrl+F, чтобы три раза применить последний фильтр. Измените режим наложения Blend mode на Overlay. Удерживая клавишу Ctrl, щелкните по иконке слоя Боковые стенки и нажмите Backspace, чтобы удалить лишнее.

Наконец, необходимо создать боковые панели. Сначала расширим полотно. Для этого перейдите Image > Canvas Size.

Активируйте слой Верх. Выберите инструмент Rectangular Marquee Tool и создайте область выделения, как на рисунке.

Скопируйте и вставьте в новый слой часть изображения и снимите область выделения. Потом расположите слой в палитре слоев выше всех и назовите его Панели. Нажмите Ctrl+T, разверните слой на 90 градусов и переместите его вбок, чтобы он закрывал пустое пространство. Отрегулируйте размер изображения так, чтобы оно заполняло все пустое пространство сбоку. Затем сделайте дубликат слоя и переместите его на другой край.

Вот и все! Остальное дело техники. Можно добавить каких-либо книг на эту полку или проявить фантазию и заставить теми вещами, которые Вы храните у себя дома на полках. Надеюсь, урок был Вам полезен. До скорых встреч!

Окончательный результат

Опубликовать пост в социальных сетях
Оцените запись
1 Star2 Stars3 Stars4 Stars5 Stars
Комментарии Вконтакте
Комментарии
  • Технично! Надл будет протестить

  • Отличный урок! Большое спасибо!