Як зробити логотип в фотошопі

Минулого разу ми з'ясували, що виявляється в Фотошопі можна зробити, нехай з невеликими витонченими, візитку. Цього разу ми з'ясуємо, що Фотошоп здатний і на цілком робочий і придатний для замовника Логотип.

Маса замовників під логотипом на увазі не більше ніж картинку, яку вони зможуть подивитися на своєму комп'ютері. Основна проблема починається тоді, коли замовник, намилувавшись на логотип у своєму моніторі вирішує пустити його в справу. Наприклад надрукувати великий плакат розміром з будинок. Пам'ятається саме такий плакат коли то вивішував сайт Delfi. Або зробити світиться вивіску для свого магазину. Або надрукувати календарі з великим красивим логотипом, гарячим, з під лапи дорогого дизайнера.

І ось уже щасливий замовник відсилає свою моніторну картинку в фірму, яка створює свячень вивіски для магазинів. Але проходить пару годин, і замовник отримує відповідь: «Велике спасибі, ми зрозуміли який у вас логотип. Ніяких проблем, вивіску зробимо. Але, будь ласка, надішліть нам логотип в кривих. Ви надіслали нам не зрозумій яку картинку в JPG розміром 500 на 400 px. З цього не зробити вивіску. Якщо у вас немає логотипу в кривих, ми із задоволенням приймемо від вас додаткову суму грошей за «векторизацію» логотипу. »Так, мабуть подібний логотип, який дістався нашому замовнику можна використовувати хіба що для шапки сайту. І до речі про векторизації, якщо вас цікавить це питання, почитайте мою статтю З растра в Вектр.

Справа в тому, логотипи робляться в векторі. Звичайно, так було не завжди. За часів моєї бабусі логотипи малювали художники і ілюстратори на величезних полотнах. У сучасному комп'ютерному світі растровий логотип - мертвий логотип. Його можна, хіба що зменшити якщо він великий або роздрукувати як є. Векторний логотип - математична інформація про контурах логотипу. Його можна легко збільшити для друку на будь-якій поверхні, його можна завантажити в Автокад, в спец машину з різання паперу, в машину з випилювання фігур з матеріалу.

Будь-яка велика компанія в сучасному світі має брендбук і стратегію просування логотипу. Тобто серію прийнятих усередині компаній правил позиціонування логотипу. Яким він повинен бути? Що з ним можна робити. Де його можна друкувати кольоровим, де його можна друкувати стилізованим, де чорно білим. Деякі компанії допускаю стилізацію, деякі забороняють. Але в будь-якому випадку логотип починається з простої чорно-білої векторної форми. Потім йде фірмовий стиль, потім йде стилізація.

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

У цьому уроці-воркшоп зі створення лого в Фотошопі я використовую свій старий логотип AQ, який я створював для одного приятеля. Пам'ятаю, ми домовилися про бартер, я йому логотип і дизайн для CMS, він мені движок сайту і верстку. Правда, після того як я свою частину виконав, йому здалося відмінною ідеєю зникнути і не відповідати, замість того щоб сказати «Вибач, зовсім немає часу робити верстку». Даний логотип представляє з себе ряд простих овальних яйцеподібних об'єктів. Фотошоп представляє нам ряд дуже убогих інструментів для роботи з векторними шляхами. На щастя, цих мізерних інструментів цілком достатньо щоб зробити 60% існуючих логотипів, якщо не більше. Я почну з створення форм, буду посилатися на інші уроки, які допоможуть вам створити мій логотип, і звичайно в кінці уроку кожен зможе завантажити мій PSD фаил з усіма верствами.

Виберіть інструмент Ellipce Tool і намалюйте звичайний еліпс. На панелі налаштувань обов'язкове опція Shape Layer. І якщо ви не знаєте що це, почитайте мою статтю про режими Shape Layer, Path і Fill Pixels. Якщо коротко, ця опція створює векторні контури у вигляді векторної маски з шаром заливки. І саме так вектор відображається в Фотошопі.

Виберіть інший інструмент Direct Selection Tool. він виділяє конкретні векторні точки і може змінювати напрямок їх направляють. Клікніть їм по еліпсу. Потім виділіть дві середні точки, верхню і нижню. Щоб вибрати відразу 2 точки, тисніть SHIFT. Коли 2 точки виділені, потягніть їх назад, щоб еліпс прийняв яйцеподібної форму. Перша форма готова.

Як залити кольором? Знайдіть шар овалу на панелі шарів Layers. Клацніть по іконці заливки, у вікні виберіть колір.

Знову продублюйте яйце, знову скористайтеся Edit> Free transform. але на цей раз просто стисніть яйце по вертикалі. Потім виберіть Direct Selection Tool. знову виділіть середні точки, і змініть довжину направляючих кожної з точок. Це зменшить кут нахилу між точками. Вітаю, ми відтворили форму яйця. І це перший крок на шляху створення логотипу в Фотошопі. Перейдемо до букв. Це яйце залити потрібно білим кольором.

Виберіть найперше яйце і продублюйте шар. Помістіть його на самий верх і скористайтеся Edit> Free transform щоб зменшити його розмір, до розміру літери, яка поміститься всередині яйця. Не вимикайте Free transform. потягніть за середні якоря, щоб розширити яйце по вертикалі.

Знову продублюйте це яйце Layer> Dublicate Layer. знову виберіть інструмент Free Transform і зменшіть даний шар затиснувши SHIFT на клавіатурі, щоб зменшення було рівномірним. Залийте отриману фігуру білим кольором і при необхідності, а вона швидше за все виникне, трансформуйте її ще раз по вертикалі і горизонталі, щоб отримати візуально рівномірний контур літери, замість звужується по краях.

Знову продублюйте блакитне яйце від букви Q і перемістіть його в ліву сторону. Це буде основою для букви А. Для початку розгорніть його в іншу сторону Edit> Transform Path> Horisontal і стисніть його по горизонталі, щоб надати більш стислу форму і при необхідності скористайтеся Direct Selection Tool. щоб змінити фігуру точково, наприклад збільшити кут овалу подовживши напрямні по краях.

Знову продублюйте цей овал, зменшіть розмір, залийте білим, при необхідності стисніть по вертикалі, щоб контур літери А вийшов рівномірним.

Залишилося домалювати частина букви Q. Виберіть інструмент Rectangle Tool і намалюйте невеликий прямокутник. Залийте його білим кольором і помістіть під букву Q. Продублируйте, і зменшіть його за допомогою Free Transform. потім помістіть вище букви Q. Наш логотип в Фотошопі наближається до завершення.

Виберіть на шарах зовнішній блакитний овал від букви А. Тепер виберіть інструмент Path Selection Tool і клацніть по овалу. Овал буде виділено. А на шарах ви побачите, що ваша векторна маска підсвітити. Це тому що тепер ми працюємо всередині векторної маски цього шару. Далі попереджаю, не користуйтеся інструментом Move Tool. він керує шарами. Використовуйте тільки Path Selection Tool. який на вигляд виглядає як чорна стрілочка, але керує не шаром цілком, а тільки векторних контуром в масці.

Повторіть всю операцію. Виділіть другий контур інструментом Path Selection Tool. натисніть SHIFT. На курсорі Path Selection Tool з'явиться плюсик. Тепер пересуньте контур і він скопіюється. І це другий спосіб дублювати контури. B в цей раз я знову скористався трансформацією через Warp щоб ще сильніше зігнути овал.

Тепер виділіть інструмент Rectangle Tool. Візуально нічого не змінилося. Але зверніться до панелі налаштувань Rectangle Tool. Швидше за все там обрана опція Create Shape New Layer. Скориставшись Rectangle Tool ви просто створите інший шар з новою векторною маскою. А ми цього не хочемо. Ми хочемо малювати тільки на одному шарі. Перейдіть в панелі налаштувань на опцію Add to Shape Area (+) Ця настройка додає векторні шляху на вже створені векторні маски. Залишилося тільки виділити правильну векторну маску на потрібному векторному шарі. Намалюйте 2 прямокутника.

Залишилося зібрати з усієї цієї гори нормальну фігуру і для цього ми скористаємося режимами Add, Subtract, Exclude і Intersect. Налаштування - Subtract перетворює векторну фігуру в «вирізали» векторну фігуру. Як в букві 0 присутній 2 контуру. Але один зовнішній, що заповнює, а другий, трохи менше, вирізує. Ось і виберіть інструментом Path Selection Tool великий прямокутник і овал, і перейдіть в налаштуваннях на Subtract from Shape Area (-)

Для точності виберіть інструмент Rectangle Tool. в настройках поставте Subtract from Shape Area (-) і відріжте ще один шматочок від букви А. Потім виберіть інструмент Direct Selection Tool. клікніть по верхньому кутку вузького прямокутника, виділіть векторну точку і потягніть її вниз. Фігура набуло сенсу. І якщо все правильно, ви тільки що навчилися робити логотип в Фотошопі з нуля.

Зливаємо в дещо іншому сенсі. Я не збираюся растеризувати шари, які ми старанно малювали в векторі. Але подивіться що відбувається на робочій області. Що являють собою наші векторні фігури? Здебільшого це купа овалів, які наліз один на одного створюють видимість складних фігур. А на ділі у нас тільки одна складна фігура, буква А. Ми бачимо Q. але тільки тому що білий овал поверх блакитного овалу, а хвостик літери Q перетинає основна яйце, здається ніби в цьому місці яйце переривається, щоб дати хвостику Q вийти за межі , але насправді білий прямокутник візуально закриває яйце.

З одного боку зійде і так, а з іншого боку, кожна з цих фігур при збереженні в PDF створить маску з растрової заливкою, яка буде вбудована всередину. Ми отримаємо цілу купу шарів, маски яких будуть перекривати один одного. Такий фаил буде більше важити, а в хаосі верств неможливо розібратися, тому я пропоную створити всього 3 складні фігури, замість 104-х простих.

Виконайте те ж саме з буквою Q. Виділіть білий хвостик і білий овал і скопіюйте контури всередину основного блакитного контур від букви Q. Змініть їх налаштування на Subtract from Shape Area (-) Потім скопіюйте і видиму частину хвостика. І я б злив літери A і Q. так як вони не призначені для того щоб перебувати окремо один від одного. В ході подібної роботи може виявитися ситуація, коли у вас всередині однієї маски буде додає контур, і приховує. І приховує буде перекривати додає. Ось що відбувається насправді. Вирізує контур вирізують додає бо знаходиться вище за ієрархією. Насправді всі ці контури знаходяться не на одній площині. Звичайно, в фотошопі немає «Шарів» контурів, ними неможливо керувати так як в Ілюстраторі. Все що ми можемо зробити, це вирізати контур і скопіювати його назад. Тоді він з'явиться вище всіх інших контурів.

Аналогічну роботу виконайте з контурами великого яйця щоб в результаті отримати всього 2 шари - зовнішня темно блакитна смужка і внутрішня світло блакитна. І мені здається, ми тільки що намалювали логотип у векторі за допомогою Фотошопа. Залишилося тільки зберегти його в формат PSD. EPS або PDF.

У плані друку логотипу важливі кольору. Працюйте в колірному режимі CMYK, Image> Mode> CMYK про який ви докладно можете почитати в моїй статті Режим кольору CMYK. щоб дізнатися, як готувати графіку для друку почитайте статтю Підготовка до друку за 10 хвилин. Якщо ви впевнені, що логотип створюється насамперед для Веб контенту я все одно порадив би вам добитися максимально яскравих кольорів в CMYK. а потім вже переводити логотип в RGB для використання в Інтернет. В такому випадку ви будете впевнені в тому, що логотип буде виглядати однаково як на друку так і в інтернеті. І я сподіваюся, що тепер ви зможете самі створити цілком професійний в технічному плані логотип.

Як зазвичай ви можете завантажити фаил в форматі PSD з усіма верствами. Якщо вам сподобався урок, натисніть кнопочку Like.