Малюємо іконку для Twitter
Настя Манно — про веб-дизайн просто та зі смаком!
Малюємо іконку для Twitter
Уроки фотошоп. Ви ще не у Twitter-і? Тоді ми йдемо до вас! :) А тим, хто вже в темі, пропоную спробувати намалювати для власного блогу прикольне зображення твішки-пташки. Це корисно як у плані вдосконалення навичок володіння інструментомПеро (Pen Tool) у програміФотошоп, так і у справі надання своєму блогу неповторної рисочки. Почнемо!
Насамперед слід хоча б загалом накидати малюнок на звичайному аркуші паперу. Щоб було від чого відштовхуватися. Особливими художніми талантами при цьому мати зовсім не обов'язково. Краще намалювати кілька різних образів, щоб було з чого вибрати. У мене вийшла ось така зграйка:
Тепер відкриємоФотошоп і створимо новий документ із білим тлом. Чому не з прозорим? Адже іконку зрештою бажано отримати саме з прозорим тлом, щоб можна було приліпити будь-куди. Просто мені зручніше малювати на білому тлі. Так краще видно. А шар із фоном наприкінці роботи можна просто вимкнути та зберегти малюнок у форматі png.
Щоб було зручніше працювати, я просто відсканувала свій малюнок, відкрила його у Фотошопі та вирізала потрібну картинку. Потім я скопіювала її та перенесла в новий проект. Нагадаю, що швидко перемикатися між відкритими проектами у Фотошоп можна за допомогою клавішіTab. Скопіювану картинку я помістила на новому шарі поверх основного тла.
Збільшимо зображення в робочій області, щоб потім було легше потрапляти мишкою в потрібні точки.
Тепер додаємо новий шар, вибираємо інструментПеро (Pen Tool) і починаємо поступово і частинами обводитималюнок. Які це частини? Тушка, дзьоб, очі, хвостик, крила та лапки. Кожна частина обводиться на окремому шарі та заздалегідь вибраним кольором. Чи не біда, якщо колір ви не вгадали відразу. Його потім легко можна змінити, клацнувши по відповідній іконці на потрібному шарі. Але давайте все ж таки по порядку.
Спочатку обведемо Пером тушку звіра. Для цього виберемо у палітрі світло-блакитний колір. Наприклад, #1ba5f5. У налаштуваннях Пере повинна бути включена іконкаShape layers :
Обведення Пером робити дуже просто: ставимо якірні точки у всіх кутах малюнка. Нехай спочатку контур буде дещо незграбним. Потім ми виправимо всі вигини як нам потрібно. Не забувайте, що обведення Пером має бути замкненим. Тобто остання точка-якір повинна бути з'єднана з першою.
Можна, звичайно ж, відразу Пером виводити потрібну кривизну ліній, що з'єднують якорі, але для цього потрібен пристойний досвід володіння інструментом. Я роблю простіше: після того, як лінія замкнута, я перемикаюся на інструментConvert Point Tool (це така похила «галочка» з тієї ж обойми, де лежить і саме Перо):
Потім, клікнувши лівою клавішею миші по будь-якій якірній точці обведення і, утримуючи натиснутою клавішу, тягнемо в будь-який бік і отримуємо пару «вусиків», які витяглися їх якірної точки.
Далі цими вусиками можна регулювати кривизну ліній з обох боків обраної якірної точки. Просто хапаємося за кінці вусиків тим самим інструментом і тягнемо в потрібну сторону, домагаючись потрібної кривизни лінії. Тут головне – не поспішати. Якщо ви випадково знову натисніть на даному інструменті по якірній точці, то вусики зникнуть, а лінія повернеться у вихідний стан. Якщо ж вам необхідно повернутися до якоїсь якірної точки і знову поправити кривизну лінії за допомогоювусиків, то клікайте не по якірній точці, а по лінії рядом з нею. Тоді вусики знову з'являться у поточному положенні.
Таким чином, ми зробили обведення тушки на нашому малюнку:
Тепер, щоб обвести очі, ми шар з обведеною тушкою на якийсь час вимкнемо. Далі, додамо новий шар і на ньому обводитимемо Пером одне око. Попередньо виберемо у палітрі білий колір. Щоб обвести коло, достатньо поставити всього 4 якірні точки:
Додамо новий шар і обведемо на ньому друге око. І далі чинимо так само з усіма деталями пташки, підбираючи для кожного елемента свій колір. Невеликий хінт: загальна картинка збирається подібно до аплікації. Відповідно, кожен шар має бути на своєму місці. Очі пташки не можуть перебувати за шаром з тушкою, тому що їх тоді буде не видно. Однак це властивість допомагає приховати непотрібні деталі і накладати шари один поверх іншого без точної вивірки кордонів.
У результаті отримуємо вже щось більш-менш схоже на птаха:
Тепер шар із начерком можна вже вимкнути. Пташка, прямо скажемо, вийшла ніяка. Бо плоска. Потрібно додати їй трохи об'єму. Для початку займемося очима. Перемикаємося на шар з білком одного ока, потім клацаємо по іконці fx і в меню вибираємоGradient Overlay. Налаштування градієнта повинні бути такими:
Так ми надамо об'єм оку, відтінивши білок і зробивши його ніби опуклим. Щоб не повторювати процедуру для другого ока, просто клацаємо за словомEffects у шару першого ока правою клавішею мишки, вибираємо в меню пунктCopy Layer Style, потім клацаємо знову ж таки правою клавішею по шару з другим оком і в меню вибираємо пунктPaste LayerStyle. Отримуємо парочку опуклих пташиних очей:
Тіні також можна малювати, накладаючи поверх існуючих деталей птиці нові шари, намальовані тим самим пером, але вже темнішого кольору. Наприклад, виділимо так тіньовий бік дзьоба:
І далі так само намалюємо тіні для крил, хвостика і самої тушки. Щоб ще більше підкреслити об'єм, додамо до шарів з тушкою та очима наступний ефект шару (кликаємо по іконці fx внизу панелі шарів):
Залишається тільки додати напис Follow Me, на яку пташка вказує крилом. Вибираємо щось із прикольних рукописних шрифтів. Наприклад, Big Fish Ensemble (ZIP файл). Отримуємо ось таку симпатичну іконку:
Оскільки ми малювали всі у векторі (а ви не знали. :) ), то можемо сміливо змінювати розміри загального зображення і зберігати потім які нам необхідні іконки у форматі png. Тільки не забудьте насамперед зберегти сам проект у фотошопівському форматі psd. Мало чи. Завжди ще може потім стати в нагоді.