Створюємо серію іконок

Напевно всі бачили на сайтах біля розділів картинки, що позначають дану тематику? Отож, я вирішив написати урок про створення серії іконок в одному стилі.

Крок 1.

Створимо документ розміром 100х500 пикселей, 72 крапки. Ширину я брав з розрахунку 5 іконок по 100 пикселей = 500.

"Розмітимо область". Створюємо напрямні через кожні 100 крапок. Для зручності я ще додав лінійки на місці самої крайньої іконки.

Крок 2.

Приступимося до малювання.

Вибираємо інструмент "Custom Shape Tool"(U). Як форми я вибрав стандартні фотошоповские форми Web.

Малюємо "конвертик", режим - "Paths".

Новий шар (Ctrl+Shift+N). Скидаємо цвіту (D). Вибираємо кисть діаметром 2-4px.

Далі інструмент "Pen Tool"(P) - Stroke Path - Brush (ставимо галочку Simulate Pressure).

Так, важливо, щоб у кисті стояли такі параметри, інакше ефекту Simulate Pressure не вийде

Результат:

Новий шар. "Pen Tool"(P) - Fill Path - Background Color(білий). Метод змішування - Overlay. Зливаємо шари (Ctrl+E).

Далі вибираємо Polygonal Lasso Tool.

Ctrl+клич на шарі з конвертом, і разом із затиснутої Shift малюємо от таке виділення, тобто робимо тло конверта.

От приклад:

Створюємо новий шар. заливаємо його білим цвітом. І поміщаємо за шар з конвертом.

Настроювання шару: Gradient Overlay 7dbe0a(0%) - a1d54f(50%) - 80c218(50%) - a2d93f(100%)

Зливаємо шари. Free Transform - Distort (До речі краще залишати сховану копію шарів)

От і все. З першою іконкою ми закінчили. Далі кроки ті ж самі, тільки форми різні. Головне дотримувати пропорцій і, властиво, розміщати вузли трансформації в місцях, позначених червоними колами.

От результат з 5-ю іконками.

П.С. Щоб розрізати загальну картинку, властиво на іконки, ограничте кожну іконку напрямними через кожні 100 пикселей, як у кроці 1, а потім виберіть інструмент Slice, -> Get slices from guides і збережете у форматі, що Вам потрібний.

Кориснi статтi:

Створюємо серію іконок

Джерело: photoweb.com.ua