Как создать модный стеклянный кофейный столик для иконки в Photoshop

Что такое сет иконок без ультра-современной мебельной тематики? В этом простом, но качественном уроке мы учимся использовать элементы утонченных изящных линий и материалов для создания стильных иконок. Мы воспроизведем концептуальный дизайн стеклянного кофейного столика, похожий на тот, который предложил Isamu Noguchi в 1944 году. И так, поехали!

1 Шаг

Как художники упражняются в рисовании сцен из окружающей среды, дизайнеры иконок рисуют существующие предметы, изучая форму, текстуры и свет. В качестве исходного предмета мы взяли кофейный столик, предложенный дизайнером Isamu Noguchi (поищите его в Google).

Создайте новый документ и задайте ему размеры в 512px по ширине и высоте (это максимальный размер иконки, требуемый операционными системами на сегодня). При создании иконок мы начинаем с наибольшего размера, затем создаем картинки поменьше, подстраивая мелкие детали нужным образом, чтобы сохранить их в итоге четкими. Наш столик имеет симметричную стеклянную столешницу, поэтому добавьте несколько направляющих для облегчения работы.

2 Шаг

Активируйте Snap из меню View. Используя инструмент Pen Tool в режиме Shape Layers, нарисуйте правую половину стеклянной столешницы, используя привязку к направляющим, созданным на предыдущем шаге (2a).

Кликаем правой клавишей мыши на этом слое и выбираем Duplicate Layer. Отобразите полученную фигуру по горизонтали и переместите ее на нужное место по левую часть центральной вертикальной направляющей (2b). Теперь выполняем двойной клик по обоим слоям и выбираем Rasterize Layer. В конце концов, выделяем оба слоя и нажимаем Ctrl + E, чтобы слить их в один. Назовите этот слой “Top”. В палитре Layers уберите значение Fill до 0%, затем примените следующие стили слоя: Gradient Overlay, Stroke, Inner Glow (2c). Верхняя часть столешницы готова (2d).

3 Шаг

Создайте копию слоя “Top”, сдвиньте ее под “Top” и переименуйте в “Bottom”. Сместите слой чуть вниз на 6px, затем удалите в нем эффект Gradient Overlay, оставьте Inner Glow и сделайте Stroke чуть темнее. Таким образом, обод нижней поверхности столешницы будет визуально проступать сквозь верхнюю, что даст чудесный стеклянный эффект (3a).

Продублируйте оба слоя: “Top” и “Bottom”, выполните Ctrl + клик по слою “Top copy”, чтобы загрузить его выделение, затем выберите слой “Bottom copy” и нажмите Delete — в итоге мы получим лишь оставшийся ободок (3b). Переименуйте его в “Thickness” и удалите слой “Top copy” за ненадобностью. Полученный ободок нужно залить градиентным металликом, поэтому примените к нему следующие стили (3c).

4 Шаг

Добавим к верхней поверхности отражение. Продублируйте слой “Top” и переименуйте его в “Reflection”. Нажмите L для выбора инструмента Lasso Tool и проведите диагональное выделение по нижней половине поверхности (4a). Удалите выделенный участок слоя. Примените к оставшейся части слоя стиль Gradient Overlay с режимом наложения Overlay и понизьте Opacity слоя до 60% (4b). Сгруппируйте слои (4c).

5 Шаг

Теперь перейдем к ножкам. При помощи перспективных направляющих нарисуйте одну плоскость первой ножки инструментом Pen Tool в режиме Shape Layers (5a). Продублируйте ее, нажмите Ctrl + T, выполните клик правой клавишей мышки, выберите Flip Horizontal, после этого — Flip Vertical. Затем инструментом Direct Selection Tool (A) несколько раз наклоните и подстройте полученную фигуру так, чтобы получилась правая ножка. Примените стили Gradient Overlay для каждой из них цветов от темно-серого к серому и назовите их “Side” (5b).

6 Шаг

Теперь — сложная часть. Ножкам нужно придать толщину. Прочтите описание, но для лучшего понимания руководствуйтесь иллюстрациями.

Продублируйте слой левой ножки “Side”, спрячьте оригинал. Назовите слой “Inner thickness”, удалите все его внешние точки (все точки, находящиеся внизу), оставив только те, которые показаны на рисунке 6a. С выбранным контуром откройте палитру Paths и создайте новый путь под названием “Inner ptofile” (6a). Создайте еще одну копию слоя левой ножки и сдвиньте ее немного левее и выше (6b). Сделайте его копию, назовите ее “Outer thickness” и точно также удалите внешние точки слоя, пересохраняя контур под названием “Outer profile” в палитре Paths (6c).

7 Шаг

В палитре Paths выберите путь “Outer profile”. Выберите Direct Selection Tool (A) и выделите этот контур. Нажмите Ctrl + C, скопировав путь в буфер обмена (7a).

Теперь выберите “Inner profile” в палитре Paths и нажмите Ctrl + V для вставки скопированного “Outer path” уже в этот путь. Уберите из палитры Paths контур “Outer profile” за ненадобностью (7b). Инструментом Pen Tool (P) соедините два контура прямыми линиями (7c). Выполните Ctrl + клик по контуру в палитре Paths, чтобы загрузить выделение по его форме.

В палитре слоев создайте новый слой, назовите его “Inner thickness” и поместите его под слой “Side” с левой ножкой. Нажмите Alt + Backspace, чтобы заполнить выделение основным цветом, неважно каким, главное, чтобы вы смогли увидеть результат (7d). Должно получиться, как на иллюстрации ниже (7e).

8 Шаг

Используя точно такой же метод, нарисуйте внешнюю толщину для левой ножки. Делайте все в соответствии с рекомендациями на рисунке — так проще воспринимать информацию.

9 Шаг

Придайте объема теперь правой ножке. Опять же — выполняйте все по инструкциям на картинке, потому что легче сделать, чем описать процесс.

10 Шаг

С ножками все! Теперь просто добавьте легкую голубую тень под сам столик и можете наслаждаться результатом.

Поделитесь уроком

Чириканье Мыло Вконтактик Рожи ЖэЖэ Яша

Правовая информация

В случае копирования урока указывайте автора и ставьте активную гиперссылку на наш сайт. Более подробную информацию вы можете получить в разделе «Правовая информация».

Переведено с сайта psd.tutsplus.com, автор перевода указан в начале урока.