Створюємо Flat іконку своїми руками
Неможливо створити гарний дизайн сайту, якщо ви не володієте навичками роботи в програмі Adobe Photoshop. Хоча б базовими. Навчитися цього ніколи не пізно. Але цей урок не про основи Photoshop. Я трохи відійшов від теми сайтобудування в цьому уроці і вирішив показати, як можна створити Flat іконку камери. Створити її дуже просто, це зможе зробити навіть найпочатковіший користувач програми Adobe Photoshop.
1. Створюємо основу для Flat іконки
Створюємо нове полотно або через менюФайл -> Створити… " або за допомогою клавіш CTRL+N з такими розмірами:
Зараз потрібно вибрати потрібний колір, щоб почати створювати іконку. Для цього в панелі зліва клацаємо на квадратик (циферка 1 на зображенні нижче), який знаходиться ліворуч, один раз. Відкриється віконце як на зображенні нижче:
Потім у полі під цифрою 2 вводимо наступний колір, але без решітки — #424a5b . Після чого натискаємо кнопку "OK".
Створюємо новий шар CTRL+SHIFT+N.
У нас вже вибрано колір, і зараз намалюємо блок, який буде основним для іконки камери. Зліва вибираємо інструмент (під номером 1 на зображенні нижче) "Прямокутник із округленими кутами". Вгорі можна задати йому невеликий радіус заокруглення (у мене він дорівнює 0,07 cm). Далі малюємо прямокутник в області праворуч (під цифрою 2):
Далі зробимо по центру Flat іконки камери невеликий блок світлішого кольору. Створюємо новий шар CTRL+SHIFT+N. Для цього зліва в панелі вибираємо інструмент.Прямокутник " і робимо такий блок як бачить нижче:
2. Робимо індикатор камери
Основа у нас є. Далі робимо індикатор. Це буде простий гурток звнутрішньою тінню. А зараз давайте перейдемо до його створення.
У панелі зліва вибираємо інструмент "Еліпс ":
Робимо основний колір (про це я писав вище) # ec4549 .
Створюємо новий шар CTRL+SHIFT+N.
І утримуючи клавішу SHIFT (щоб намалювати коло, а не овал) малюємо невелике коло:
Виділяємо на панелі шарів (якщо вона у Вас відрадить, її можна включити в меню "Вікно -> Шари ") цей новий шар з колом і клацаємо на нього правою кнопкою миші. Потім вибираємо "Параметри накладання "
Ставимо галочку навпроти пункту «Внутрішня тінь » і потім виставляємо всі значення як на моєму зображенні:
Не забуваймо після всіх змін натиснути кнопку "OK ".
3. Створюємо об'єктив іконки камери
Переходимо до створення об'єктива камери.
У нас вже вибрано інструмент "Еліпс ". Створюємо новий шар CTRL+SHIFT+N. Робимо основний колір #dde5f5.
І утримуючи клавішу SHIFT малюємо наступне коло.
Виділяємо в панелі шарів новий шар із колом та клацаємо на нього правою кнопкою миші. Потім вибираємо "Створити дублікат шару. " і після натискаємо "OK ".
Цьому новому шару потрібно встановити колір, щоб його було видно і він не зливався. Щоб його задати, робимо подвійний клік в панелі шарів на невеликий квадратик, що йде після значка ока. З'явиться знайома палітра кольорів, де вибираємо довільний колір (головне, щоб відрізнявся від фону). Після того як змінили колір, натискаємо клавіші CTRL+T і утримуємо клавішу на клавіатурі SHIFT зменшуючи розмір цього кола як на зображенні:
Коли завершимо зміну розмірів кола, натискаємо клавішу ENTER .
Раструємо шар з великим колом, для цього виділяємо його на панелі шарів і натискаємо правою кнопкою миші, де вибираємо "Раструвати шар ":
Далі попрошу Вас бути уважними, щоб зрозуміти, чи потрібно зробити наступним кроком.
Шар, який ми розтрирували, повинен бути виділений. Утримуючи клавішу CTRL, клацаємо на квадратик у верхньому шарі (який другий, якщо рахувати від значка ока). Повинно з'явиться виділення як на зображенні нижче:
Натискаємо кнопку DELETE на клавіатурі. Знімаємо виділення за допомогою клавіш CTRL+D .
Далі виділяємо шар, який знаходиться вище (з маленьким колом) і видаляємо його, також натиснувши клавішу DELETE .
Виділяємо шар з нашим великим колом (але це вже не коло, а бублик). Тиснемо правою кнопкою миші і далі вибираємо "Параметри накладання ":
Робимо наступні налаштування у пункті "Тінь ", як у мене:
Зробимо для об'єктива невеликий відблиск. Виділяємо шар під бубликом і натискаємо сполучення клавіш CTRL+SHIFT+N щоб створити новий шар. Вибираємо основний колір #a7aebe та утримуючи клавішу SHIFT малюємо коло на зображенні нижче:
4. Останній крок
Додамо деякі елементи, щоб камера виглядала живішою.
У панелі зліва вибираємо інструмент "Прямокутник із закругленими кутами ". Робимо основний колір #424a5b. Створюємо новий шар CTRL+SHIFT+N.
Потім угорі є панель, де можна налаштувати радіус кордонів (у мене він зараз '0,4 cm'):
Малюємо під об'єктивом наступний елемент овальної форми:
Потім переходимо вгору іконки камери. Створюємо новий шар CTRL+SHIFT+N. Малюємо наступний прямокутник:
Клацаємо на цей шар у панелі шарівправою кнопкою миші та вибираємо "Раструвати шар ":
Потім у нас має бути виділений шар, який ми щойно растрували (номер 1 на картинці). Утримуючи клавішу CTRL, клацаємо на шар нижче (номер 2 на картинці):
Ідемо в меню "Виділення -> Інверсія ", після чого у нас відбувається інверсія виділення і натискаємо клавішу DELETE. В результаті чого видаляється зайва частина шару, яка знаходилася за межами камери.
Створюємо новий шар CTRL+SHIFT+N. Малюємо наступний елемент:
Клацаємо на нього правою кнопкою миші та вибираємо "Створити дублікат шару. ":
Зміщуємо цей дубльований шар як у мене (тобто трохи нижче):
5. Відеоурок створення Flat іконки
Стаття вийшла велика, але це через велику кількість картинок. Такі статті будуть виходити, але не часто, тому що йде дійсно багато часу на їх створення. Я Вам показав, що зараз Ви можете самостійно створювати Flat іконки. Щоб робити це швидко, потрібна практика, дуже багато практики. На жаль, нічого легко не дається і, я думаю, Ви це чудово розумієте.
До будь-якої частини статті можна перейти за допомогою посилань нижче: