Колись візитка була показником приналежності її власника до вищих верств суспільства, до еліти. Сьогодні це цілком звичайний атрибут, що входить в діловий набір середньостатистичного громадянина. Володарем візитки може виявитися студент і самий звичайний сантехнік, який підробляє приватними замовленнями. Однак, незважаючи на велику популярність даного продукту цивілізації, виготовлення візитки є недешевим задоволенням. Наприклад, тільки замовлення на розробку її дизайну може завдати істотної шкоди особистому бюджету. На щастя, в століття комп'ютерів все значно спрощується і витрати по її виготовленню можна помітно скоротити. Досить мати під рукою ПК і встановлений на ньому Фотошоп. Тепер вам залишиться тільки прочитати цю статтю, і ви будете знати, як створити візитку в Фотошопі власними руками без зайвих витрат. Отже, приступимо. Працювати будемо в Photoshop CC 2014.
Зміст статті
- обдумуємо стратегію
- Перший етап: дрібні, але необхідні деталі
- Другий етап: створюємо шаблон під друк
- Третій етап: що ж ми хочемо зобразити?
- Четвертий етап: фон і рамка
- П'ятий етап: малюємо фотоапарат
- Шостий етап: кільця
- Сьомий етап: вводимо дані
- Заключний етап, не передбачений планом
обдумуємо стратегію
Давайте зробимо не абстрактну візитку, а розробимо макет картки під якусь конкретну професію, наприклад весільний фотограф. Спочатку складемо план роботи, щоб потім не кидатися з одного боку в бік.
- Створення полотна, вибір колірної моделі, розмітка.
- Налаштування полотна.
- Продумуємо порядок роботи і стиль візитки:
- фон;
- логотип + картинка в тему;
- написи.
- Створюємо фон і оформляємо рамку.
- придумуємо логотип.
- Весільні обручки.
- Друкуємо і компонуємо на полотні дані.
Перший етап: дрібні, але необхідні деталі
Запускаємо Фотошоп. Тиснемо Ctrl + N, створюючи новий полотно. У діалоговому вікні вводимо назву нашого документа. Далі задаємо стандартні значення розмірів візитної картки: 90 на 50 мм. З огляду на, що візитка сама по собі невеликого розміру, а якість друку нам потрібна висока, то дозвіл виставляємо 300 пік / дюйм - воно дасть відмінний висновок на друк.
Колірну модель вибирайте в залежності від того, де і на чому будете друкувати картки. Якщо ви плануєте масовий випуск в друкарні на поліграфічних верстатах, то ставте CMYK, якщо обсяг невеликий і ви готові обійтися домашнім принтером - то призначайте модель RGB. У нашому випадку ми зупинилися на домашньому варіанті.
Примітка. В принципі, якщо в останній момент ви передумаєте і вирішите все-таки друкувати в іншій кольоровій моделі - нічого страшного: Фотошоп дозволить вам перейти в потрібний колірний простір в будь-який момент.
РекламаФон підберіть на свій смак - все одно ми будемо його міняти. Кольоровий профіль залишаємо за замовчуванням, пікселі вибираємо "квадратні".
Клацаємо "ОК" і приступаємо до налаштування полотна для друку. Зробити це слід відразу, щоб потім не стрибати з бубном навколо вже скомпонованого макета, підганяючи розміри під висновок на друк і обрізку після неї.
до змісту ↑Другий етап: створюємо шаблон під друк
Тепер нам потрібно додати 4 напрямних, які позначать візуально майданчик для роботи і вилучать її від лінії розрізу. Справа в тому, що якщо зараз не залишити порожні поля по межах візитки, то в момент розрізання надрукованого листа з картками можуть проявитися білі поля відрізу.
Вибираємо в головному меню "Перегляд> Нова напрямна".
Клацаємо "ОК", у вікні налаштувань ставимо:
- Орієнтація> Горизонтальний;
- Положення: 0 мм.
Знову повторюємо операцію, тільки положення виставляємо 50 мм.
Проробляємо ті ж дії, але вже з вертикальною орієнтацією. Тут становище дорівнюватиме 0 і 90 мм. У підсумку ми повинні отримати 4 направляючих по межах візитки.
Тепер нам потрібно збільшити розмір полотна під обріз. Для цього заходимо в "Зображення> Розмір полотна" або ж тиснемо комбінацію клавіш Ctrl + Alt + C.
У вікні "Розмір> Полотна" в полях "Ширина" та "Висота" вводимо значення 5 мм (стандартний розмір поля обріза) і ставимо галочку на пункті "Відносна". Дана операція додасть по 5 мм до кожної сторони нашої візитки.
В результаті подібних дій напрямні змістилися на 5 мм всередину документа. Додамо ще 4 направляючих на нові кордони полотна. Зробимо це ми вже іншим способом, відмінним від першого.
Заходимо: "Перегляд> Прив'язати до> кордоні документа (ставимо галочку)".
Примітка. Радимо виставити всі галочки в даному підміню. Згодом це стане в нагоді.
Після цього направляють придбають властивість прилипати до країв полотна. Для подальших дій нам буде потрібно лінійка. Якщо лінійка у вас не відображається, то просто натисніть Ctrl + R, і вона з'явиться. Ставимо курсор на будь-яку сторону лінійки і затискаємо ліву кнопку миші. Тепер тягнемо курсор вниз або вправо (в залежності від сторони лінійки), тим самим витягаючи з неї направляючу. Ліву кнопку миші, природно, не відпускаємо. Підводимо направляючу до кордону полотна і бачимо, як вона злегка стрибає по ходу руху і прилипає точно по межі документа. Таким чином ми виставляємо всі 4 нові напрямні з чотирьох сторін візитки. Отже, ми позначили поле для обріза.
Далі нам слід створити кордону для робочої зони, всередині якої будуть розташовуватися наші дані, і перетинати ці лінії вони не повинні. Цього вимагає стандартний дизайн будь-візитки. Звернемося знову до напрямних. Проробляємо ті ж самі маневри, як і у випадку з першим набором напрямних, за невеликим винятком - в поле "Положення" ставити не 0 мм, а 5 мм. Решта значення (50 і 90) залишаємо незмінними. Дивимося, що у нас вийшло:
- направляюча 1 - фізична межа полотна, яка буде виведена на друк і згодом обрізана;
- напрямна 2 - межа самої візитки (її можна буде оформити графічно, наприклад, пустити рамку);
- направляюча 3 - обмежує робочу зону.
Отже, ми закінчили другий етап нашого плану. Створили повноцінну основу візитки, готову до висновку на друк. Нам залишилося тільки наповнити її вмістом.
до змісту ↑Третій етап: що ж ми хочемо зобразити?
Обов'язковий крок - спочатку в голові потрібно скласти хоча б приблизну картинку: з чого складатиметься наша майбутня візитка. Це значно полегшує і прискорює процес подальшої роботи:
- Так як ми займаємося весільним фото, то нам потрібно як мінімум два зображення. Одне пов'язане з фотографією, інше з весіллям. Не будемо напружуватися - в кінці кінців, це навчальний приклад, і тому задіємо схематичне зображення фотоапарата плюс весільні кільця. Обидві картинки намалюємо самі - це додасть візитці оригінальність. Причому зображення фотоапарата буде одночасно і логотипом.
- Фон зробимо від сірого до світлого, віддаючи данину родоначальниці фотосправи - чорно-білої фотографії.
- Логотип. Помістимо його на звичному для всіх фірмових знаків місці - в лівому верхньому кутку. Кільця найкраще виглядатимуть внизу по центру. Письмова інформація займе центральне місце і правий нижній кут.
- Все це буде укладено в рамку, пущену по межі візитки. Стиль рамки ми визначимо по ходу роботи. Ну що ж, план наступу затверджений - можна приступати до основного етапу.
- заключна доопрацювання.
Четвертий етап: фон і рамка
Для фону ми вирішили застосувати не просту заливку, а градієнт з подальшою обробкою фільтром. Створюємо новий шар (Ctrl + Shift + N). Вибираємо на панелі інструментів градієнт (G). Налаштування виставляємо як на скріншоті. Градієнт використовуємо Chrome Ring. Він є в одному з наборів (Chromes), що поставляються з Photoshop CC 2014. Проводимо курсором зверху вниз або навпаки.
Після цього тиснемо Ctrl + Shift + F, викликаючи вікно "Послабити". У ньому змінюємо режим накладення "Нормальний" на "Заміна світлим".
Далі йдемо в "Фільтр> Спотворення> Полярні координати".
Тиснемо "ОК".
І отримуємо наступний результат (див. Скріншот нижче):
Нас він не зовсім влаштовує. Хочеться чогось більш цікавого. Тиснемо 5 разів поспіль поєднання клавіш Ctrl + F (Останній фільтр). Ця команда при кожному натисканні дублює застосування фільтра.
А ось цей варіант нас цілком влаштує. Трохи схоже на силуети закоханих, що цілком по темі. Тепер підгонимо створений фон в робоче поле і оформимо рамку.
Натискаємо Ctrl + T, запускаючи команду трансформації. Беремося мишкою (затискаємо л / кнопку миші) за маркери трансформерні рамки і підганяємо зображення під внутрішні напрямні. До речі, завдяки тому, що раніше ми виставили все прив'язки для напрямних, лінії трансформації без всяких проблем до них прилипають. Натискаємо Enter, завершуючи процес трансформації.
Тепер займемося рамкою. Спочатку створимо новий шар (Ctrl + Shift + N). На ньому продовжимо нашу роботу. Натискаємо Ctrl + (Перекласти назад), переміщаючи тим самим шар з майбутньою рамкою під шар з фоновим малюнком. В панелі інструментів вибираємо інструмент "Прямокутна область" (М) і малюємо виділення по середнім напрямних. Знову ж здорово допомагає прив'язка: не потрібна ніяка підгонка - все прилягає автоматом. Заливаємо виділений прямокутник будь-яким кольором і починаємо працювати зі стилями.
Двічі клацаємо на шарі з виділенням, завантажуючи вікно стилів. Ставимо галочку навпроти пункту "Обведення". Виставляємо параметри, як на скріншоті нижче.
Далі "Накладення кольору". Клацаємо на віконці з зразком кольору і переводимо курсор на шар 2 (фон). Він набуде вигляду піпетки. Клацаємо на сірому, переважно кольорі. В результаті обидва шару (2 і 3) отримають єдину колірну гаму.
Тепер потрібно привести в порядок базовий, самий нижній шар. Для початку його слід розблокувати, так як він поки недоступний для багатьох дій. Подвійне клацання по ньому викличе до життя вікно створення нового шару. Насправді шар той же самий, тільки тепер він стає "живим", тобто з ним уже можна проводити будь-які доступні для шарів операції.
Знову подвійне клацання по Шару 0 (колишній базовий) - і переходимо у вікно стилів. Йдемо в "Накладення кольору" і вибираємо світло-сірий колір.
Додамо трохи блиску в цей шар. Йдемо в "Глянець" і виставляємо там темно-сірий тон.
Результат дивимося на скріншоті.
Всю цю операцію ми провели з далеким прицілом. Ви дізнаєтеся про нього на заключному етапі.
Ну що ж. Можна сказати, що півсправи зроблено. Йдемо далі.
до змісту ↑П'ятий етап: малюємо фотоапарат
У генеральному плані під назвою "Як створити макет візитки в Фотошопі" розробка фірмового знака є однією з найважливіших задач. Солідна, ділова візитка обов'язково повинна мати логотип. Ми домовилися, що це буде фотокамера. Приступимо до її малювання. В першу чергу створюємо новий шар під номером 4 (Ctrl + Shift + N). Переходимо на нього і починаємо винаходити фотоапарат.
- Вибираємо інструмент "Прямокутне виділення" (М). креслимо прямокутник.
- Затискаємо Shift, у курсора з'явиться додатковий атрибут в формі плюсик, і малюємо затвор фотоапарата.
- Заливаємо виділення будь-яким кольором, відмінним від фону, щоб не зливалося. Для цього достатньо натиснути D (повернути кольору за замовчуванням), а потім використовувати клавіатурну комбінацію Alt + Delete (колір переднього плану) або Ctrl + Delete (колір заднього плану).
- Створюємо новий Шар 5 (Ctrl + Shift + N). Знову затискаємо Shift і тиснемо М. В результаті "Прямокутне виділення" зміниться на "Овальну область". Малюємо приблизно по центру прямокутника коло. Для того щоб окружність вийшла ідеальною, тримаємо при малюванні клавішу Shift натиснутою. Всі дії проводимо на шарі 5. Заливаємо коло будь-яким кольором.
- Додаємо ще один шар (Шар 6). Повністю повторюємо дії з пункту 4. Тільки є два невеликих відмінності: коло креслимо приблизно в 2 рази менше, ніж попередній, і заливаємо іншим кольором (в нашому випадку білим).
В результаті маємо 3 шари (4; 5; 6), на яких розташовані деталі фотокамери. Прийшов час застосовувати стилі.
Двічі клацаємо по Шару 4 і виставляємо значення, як зазначено на скріншоті. Нам потрібно змінити тільки два параметри:
- встановити товщину обведення;
- скинути непрозорість в 0.
Проробляємо ті ж маніпуляції з шарами 5 і 6.
Отже, ми маємо зображення камери, гранично спрощене і схематичне. Для простенького логотипу цілком прийнятно. Залишилося тільки доопрацювати деякі деталі.
- Виділяємо Шари 5 і 6. Для цього клацаємо за допомогою одного з них, а потім знову клацання по іншому, але вже з затиснутою клавішею Ctrl.
Примітка. Клацання по другому шару слід проводити не де попало, а по конкретного місця. І місце це - проміжок між значком шару зліва і панелькой стилю справа.
- Підсумок - обидва шару забарвилися в блакитний колір виділення. Тепер можна працювати одночасно з обома шарами.
- Тиснемо V (інструмент "Переміщення") і звертаємо свій погляд вгору на панель властивостей цього інструмента. Знаходимо там значок "За центрами по вертикалі" і клацаємо на ньому. Той же самий фокус повторюємо із позначкою "За центрами по горизонталі". В результаті наші кола, що символізують об'єктив, відцентрувати з математичною точністю.
- На жаль, провести такий же маневр з корпусом апарату і об'єктивами не вийде в силу зміщених центрів в реальних камерах. Тому, не знімаючи виділення з 5 і 6 шару, вирівняйте їх на-віч з корпусом, використовуючи інструмент "Переміщення". В даному випадку особлива точність не потрібна. Таку ж операцію можна виконати за допомогою клавіш зі стрілками.
- Переходимо на Шар 4. Затискаємо Ctrl і клацаємо по Шару 5. Потрібно клацнути по іконці шару, розташованої зліва відразу після зображення очі. Тільки в цьому випадку ми доб'ємося своєї мети - завантажити виділення великому колу.
- Тепер натискаємо Delete і видаляємо просвічуються лінії корпусу під об'єктивом. (Ми знаходимося на шарі з корпусом. Не забули?) Проте виник новий нюанс. Бічні дуги корпусу, що залишилися після вирізання центральної частини, наклалися на окружність об'єктива, і за рахунок різниці в товщині обведення вийшло не зовсім гарне з'єднання даних деталей. Зараз ми це виправимо.
- Стаємо на Шар 5 і відкриваємо вікно "Стилі шару" (подвійне клацання по шару). В поле "Обведення" виставляємо значення 4. У результаті дивне потовщення зникає.
- Роботу з апаратом ми майже закінчили. Нам вже не потрібна така кількість шарів. Зведемо їх в один. Виділяємо всі три шари з деталями фотокамери та натискаємо Ctrl + E ( "Об'єднати шари").
Примітка. Зведення шарів зі стилями призводить до остаточного застосування стилів. Стильові шари зводяться в звичайний шар. Це слід враховувати, якщо ви надалі плануєте продовжити роботу зі стилями.
- Зараз нам потрібно зменшити зображення логотипу камери і перемістити його на законне місце - в лівий верхній кут. Тиснемо Ctrl + T ( "Вільне трансформування"). Зменшуємо зображення до потрібних розмірів і перетягуємо його на місце.
- Ну і останній штрих - зробимо логотип більш оригінальним. Для цього зайдемо в стилі (подвійний клік по Шару 6) і встановимо режим "Рельєф" з настройками, як на скріншоті.
Роботу зі створення логотипу фотоапарата можна вважати закінченою. Залишилося розібратися з кільцями і написами.
до змісту ↑Шостий етап: кільця
Для початку наведемо порядок в нашій творчій лабораторії.
- Зберемо шари в одну папку або, якщо говорити мовою Фотошопа, в одну групу. Для цього виділяємо всі шари. Стаємо на будь-який крайній шар: затискаємо Shift і клацніть по шару, що знаходиться на іншому кінці панелі. Тепер натискаємо Ctrl + G, і всі верстви виявляються в одній папці (групі). Даємо їй яку-небудь цільову назву. Угруповання шарів - дуже зручна функція при роботі зі складними зображеннями.
- Приховуємо напрямні - вони нам більше не потрібні. Йдемо в головне меню: "Перегляд> Показати> Напрямні" і знімаємо галочку. Якщо все ж виникне необхідність їх знову використовувати, то слід просто виконати зворотну операцію.
- Починаємо малювати кільця. Створюємо новий шар (Ctrl + Shift + N). Натискаємо М і вибираємо інструмент "Овальний область". Малюємо коло на новому шарі (тримаємо Shift для збереження пропорцій). Далі заходимо в "Редагування> Виконати обведення" (1). У вікні виставляємо ширину лінії 3 ПКС (2) і тиснемо "ОК". Це і буде основа для майбутнього кільця (3).
- Двічі клацаємо на шарі з кільцем. У вікні "Стиль шару" працюємо з трьома параметрами: обведення, непрозорість, тиснення. Виставляємо значення, як на скріншоті, і тиснемо "ОК". Кільце практично готове. Залишилося створити його копію і впорядкувати їх на візитці.
- Натискаємо поєднання клавіш Ctrl + J, копіюючи шар з кільцем. Включаємо інструмент "Переміщення" (V) і клавішами зі стрілками роз'єднуємо весільні символи. Виділяємо обидва шару (як це зробити, вже писалося вище). Далі тиснемо Ctrl + T (трансформація) і трансформуємо кільця так, як нам потрібно. Вирівнюємо їх по центру візитки. Якщо у вас в меню "Перегляд" включені всі прив'язки і пункт "Допоміжні елементи", то при переміщенні фігур будуть з'являтися центральні і горизонтальні напрямні, що допомагають точно вирівнювати ці об'єкти.
Отже, з кільцями розібралися - переходимо до наступного етапу.
до змісту ↑Сьомий етап: вводимо дані
Знову трохи розвантажимо панель шарів. Виділяємо обидва шару з кільцями і тиснемо Ctrl + E, зводячи їх в один шар. Тепер можна приступати до введення інформації.
Для початку давайте прикинемо, який текст повинен бути присутнім у нас на візитці. Обійдемося стандартним мінімумом:
- інформація про послугу;
- П.І.Б .;
- контактні дані.
Як все це розташувати? Порядок збережемо такий же, як у вищенаведеному списку. Місцезнаходження на візитці визначимо після закінчення набору текстових блоків (всього їх у нас 3).
- Вибираємо інструмент "Текст" (Т). Працювати будемо з панеллю властивостей, тому як нам поки не потрібні якісь особливі прийоми при роботі з текстом. Для цих цілей існує окрема палітра, але нам вона зараз не потрібна.
- Шрифт візьмемо поки Arial Regular і встановимо кегль 8. Всі ці значення потім можна легко відрегулювати. Пишемо необхідну інформацію. Робимо це так. Кожен текстовий блок вводимо окремо. Блок з номерами телефонів розбиваємо на три різних шару.
- Розподіляємо все це по візитці на остаточні позиції. Зараз ми ще попрацюємо з текстом, але місце розташування вже міняти не будемо.
- Тепер нам слід остаточно визначитися з видом шрифту і його розміром. Не будемо винаходити велосипед і підемо стандартним шляхом. Зазвичай на такі візитки ставиться рукописний стиль шрифту для опису послуги та книжковий - для інших даних. Зробимо так само. Виберемо інструмент "Переміщення" (V) і запустимо спеціальну палітру символів, натиснувши на її ярличок в доці палітр справа. При активному інструменті "Переміщення" ця палітра дозволяє працювати відразу з декількома шарами, що набагато зручніше, ніж при задіяному інструменті "Текст".
- У вікні вибору шрифту ми поставили набір символів Heather Script T для напису "Весільні ...", а для інших даних ввели звичний Times New Roman. Заодно застосували до нього похиле написання (курсив).
Примітка. Якщо у вас на комп'ютері відсутня рукописний шрифт, то зайдіть на відповідні ресурси і скачайте його собі на ПК. Там маса всіляких шрифтових наборів - і платних, і безкоштовних.
- ПІБ вийшли трохи дрібнуваті, але це ми виправимо, застосувавши трансформацію (Ctrl + T).
- А ось розміри номерів телефонів ми змінимо через палітру "Символ". Зменшуємо значення кегля до 6 і вирівнюємо текстові шари за допомогою панелі властивостей інструмента "Переміщення", як це вже описувалося раніше.
- Уважно перевіряємо всю нашу інформацію. Якщо все правильно, то нам слід растеризувати всі верстви з текстом. Для цього ми їх виділяємо (всі разом) і клацанням правої кнопки миші викликаємо контекстне меню. У ньому вибираємо пункт "Растеризувати текст" і отримуємо звичайні шари.
- Нам залишилося тільки трохи доопрацювати текст, щоб він виглядав більш гармонійно, і в цьому нам знову допоможуть стилі. Стаємо на шар "Весільні ..." і подвійним клацанням викликаємо стилі. Виставляємо всі параметри, як на скріншотах:
- Тепер правою клавішею миші клацання на цьому ж шарі - і в меню активуємо пункт "Скопіювати стиль шару". Виробляємо ті ж дії з шаром "Іванов ...", тільки вже клацаємо на "Вставити стиль шару".
- Знову викличемо вікно стилів (тільки вже для шару з П.І.Б.) і поміняємо колір в рядку "Обведення". Товщину лінії залишаємо колишню. Копіюємо стиль цього шару.
- Виділяємо 3 шари з контактами. Вклеиваем скопійований на попередньому кроці стиль. Залишився останній крок. У кожному з трьох "контактних" шарів відключаємо пункт "Рельєф". Робиться це простим клацанням по "око", розташованому зліва.
результат:
Вже непогано. Однак, на наш погляд, можна ще провести кілька заходів для остаточного доведення зображення.
до змісту ↑Заключний етап, не передбачений планом
Для початку до межі розвантажимо нашу палітру шарів. Виділяємо всі шари, що не входять в папку "Фон_Лого", і зводимо їх в один (Ctrl + E).
Далі відкриваємо групу "Фон_Лого" і виділяємо там шари 2, 3, 6. Об'єднуємо їх в одне ціле (Ctrl + E). Призначаємо шару 6 режим відображення "Difference" (Різниця). Тут нам якраз і став у нагоді стиль, колись застосований до базового шару. (Пам'ятаєте?)
Заключний крок. Запустимо модуль "Рівні" (Ctrl + L) і трохи освітлити зображення.
результат:
Нам здається, що наша візитка придбала цілком закінчений вигляд.
От і все. В принципі, ми досить докладно розповіли, як створити візитку в Фотошопі самому, не вдаючись до дорогих послуг професійних дизайнерів. Звичайно, якщо вам буде потрібно щось супероригінальне і вишукане, то краще все-таки звернутися до хорошого фахівця. Однак в більшості випадків знань, отриманих з цієї статті, цілком вистачить для розробки макета візитки власними силами. хай щастить!
