В Първа част на комбинирания урок за Photoshop и Illustrator “Пиксели и вектори“ видяхме една много добра техника за работа с двете програми едновременно.
Започнахме да правим векторна илюстрация, която ще довършим в тази тема.

Работата ни до тук изглежда така:
имаме работен файл за Фотошоп (PSD)с готовия фон:



и илюстраторски файл (Ai) с векторно октоподче (оцветената скица)



Сега ще редактираме цветовете на октоподчето, за да стои добре на фона.



Отворете PSD-то с фона във Фотошоп.
Селектирайте най-горния слой в палитрата на слоевете.
След това дайте File -> Place
и прибавете илюстраторския файл с октоподчето като Smart Object,
както направихме това в Първа част на урока:



16. След като вече виждате обекта във Фотошоп можете да редактирате основните цветове според фона и останалите обекти, ако е необходимо, за да завършите композицията.

За да отворите отново този Smart Object дайте двоен клик върху тъмбчето в палитрата на слоевете:



Файлът се отваря директно в Илюстратор.

Отключете оригиналния слой. Селектирайте обектите и редакрирайте fill както ви харесва:



17.Следва да прибавим сенки.
Най добрият метод за това е следният:
- Дублирайте желаният обект в палитрата на слоевете.
Това става като цъкнете на триъгълничето пред слоя в палитрата на слоевете.
Маркирате си желаната фигура после отваряте падащото меню горе в дясно на палитрата и избирате Dublicate:



- след това нарисувайте застъпването на сянката и дублирания обект.
Направете сянката така, че да излиза от контура както е показано на картинката:



- поставете сянката над дублирания обект в палитрата на слоевете

18. Сега селектирайте сянката и дублирания обект едновременно (като кликнете на тях с натиснат Shift)

След това кликнете на Intersect Shape Areas в Pathfinder:

Това ще направи сянката видима само в частта, в която съвпада с основната форма.

19.Използвайте този метод, за да добавите сенки и на останалите фигури.

Добавете и светлосенки в по-светъл тон от основния цвят.



Направете и всички останали дребни детайли от скицата.

20.Селектирайте областта в която искате да има градиент ефект.
(в случая това е екрана на телевизорчето) и изберете Gradient Mesh tool.
Object -> Create Gradient Mesh
Кликнете на областта, която искате да е осветена и изберете по-светъл цвят от палитрата на цветовете.



С мишката движете точките докато направите мрежа. Накрая трябва да постигнете обем на екранчето с градиент ефект.


Подробен урок за работа с Gradient Mesh може да намерите в тази тема.

Добавите градиент и на други места в работата си, ако искате

21. С Gradient Mesh tool направете очите и зъбите на фигурката.



Запомнете:

Gradient Mesh tool не работи като обикновения градиент т.е. не може да го редактирате.

За това правете детайлите и градиента на нов слой всеки поотделно. Така ще можете да местите градиента по-горе в палитрата и съответно по-долу, ако е несполучлив или пък ако решите, че без него графиката ви изглежда по-добре.

22.Когато сте готови запазете файла си и затворете Illustrator.
Върнете се в Photoshop.
Ще видите, че Smart Object-а се ъпдейтва автоматично т.е всички промени, които сте направили с него в Илюстратора са се появили и във Фотошоп.

Ето готовата векторна илюстрация:



автор: Derek Lea
източник
превод: mARTa

В две поредни теми ще ви предложа превод на един чудесен туториал на Derek Lea.
Урока е комбиниран - за Илюстратор и Фотошоп и показва идеално доброто взаимодействие на двете програми.

Ще видите една много добра техника за създаването на илюстрация като тази:



Техниката много добре демонстрира приложението на smart object във Фотошоп и показва основни стъпки за работа в Илюстратор.



Преди да започнем изтеглете работните файлове от ТУК


1. Отворете с Фотошоп background.jpg.
Отворете с Illustrator rays.ai.

Селектирайте и копирайте файла (Ctrl+C)
Върнете се във Фотошоп и поставете файла върху Backgrownd-a (Ctrl+V)
Изберете Smart Object от опциите за Paste As и дайте ОК



2.Ще видите,че векторната форма се е появила върху фона обградена от ограничителен квадрат.

Хванете единия ъгъл на квадрата. Натиснете Shift, задръжте и влачете ъгловата точка, за да увеличите размера на векторната форма.
Когато сте готови натиснете ENTER.

След това променете режима на смесване на слоя - Color.
Намалете Opacity на 26%



3.Отворете burlap.jpg
Вземете Move tool и изтеглете текстурата в работния си файл.

В палитрата на слоевете преместете слоя с текстурата под слоя Smart Object
Намалете Opacity на 51%



4.В палитрата на слоевете селектирайте слоя с текстурата.
След това дайте Ctrl+ клик върху тъмбчето на слоя Smart Object, за да селектирате векторната форма.

Докато селекцията е активна кликнете на бутончето Add Layer Mask (долу в палитрата на слоевете)

След това дубликирайте слоя.
Променете режима на смесване на копието - Screen.



5.От менюто изберете File->Place.
Намерете си папката с файловете към урока, изберете cloud1.ai. и кликнете на бутона Place.

Отваря се диалогов прозорец Plase PDF.

Направете следните настройки:
- за Select изберете Page
- за Growp to: Bounding Box и дайте ОК.

6. Ще видите,че векторната форма отново се е появила в работния файл, обградена от ограничителен квадрат.

Нагласете размера и позицията в работното пространство, както направихме това в т.2

Когато сте готови натиснете ENTER.

След това променете режима на смесване - Color Burn и дублирайте слоя.

Променете режима на смесване на копието - Color.



7. Отново дублирайте слоя.
Дайте Edit->Free Transform и нагласете размера и позицията на слоя в работния си файл.

Променете Blending Mode нa Normal и намалете Opacity на 54%
След това отново дублирайте слоя и променете позицията му.

Ето как изглежда палитрата на слоевете до тук:



8.Използвайте същият метод на работа за останалите два илюстраторски файла (cloud2.ai; cloud3.ai)

Подредете ги в работното си пространство както ви харесва. Променяйте размера им. Дублирайте ги. Преместете ги по-надолу в палитрата на слоевете и експериментирайте с прозрачността и режима на смесване.



С това да приемем, че фона на илюстрацията ни е готов.
Сега ще работим в Илюстратор:

9. В Illustrator направете нов документ.
Изберете от менюто File->Place и поставете sketch.jpg в документа си.

Нагласете размера, ако е необходимо и дайте двоен клик върху слоя в палитрата на слоевете. Изберете Template и дайте ОК.



10. Тъй като не може да правите обекти върху tamplate layer-a, направете нов слой и се убедете, че сте го селектирали в палитрата на слоевете.
Ще използваме скицата, за да направим рисунка върху този слой.

Започнете да очертавате с Pen Tool отделните фигури. Трябва да получите форма със затворена пътечка.



11. Не се притеснявайте за вътрешните детайли.
Направете фигурата цялостна, като работите по външния контур на скицата.
Трябва да получите накрая ето това:



12. За да може да виждате скицата натискайте Ctrl+Y
Очертавайте вътрешните контури, сменяйте цвета и пак дайте Ctrl+Y



13. Пипалата на октоподчето направете като си нарисувате формата на единия от „смукателите”, копирате я, променяте размера на копието и го поставяте до оригинала по контура от вътрешната страна на пипалата.

Когато сте готови с всички смукатели по пипалата дублирайте целия слой.
Това става като го хванете с мишката и го извлачите до бутончето Create New Layer долу в палитрата на слоевете.

Може би вече сте забелязали, че слоевете в Илюстратор не са като във Фотошоп.
В Илюстратор слоевете се правят, за улеснение и за по-добра организация, особено ако се работи над голям проект с много векторни форми.

И така в този слой са всички форми, съставящи октоподчето. Именно него трябва да дублирате:



14. Заключете дублирания слой (като цъкнете на бутончето до оченцето, появява се катинарче)

Селектирайте оригиналния слой.

Отворете Pathfinder palette и изберете Add To Shape Area , дайте Expand или кратката команда (Alt+ клик върху слоя в палитрата на слоевете)



Така ще конвертирате слоя в обособен обект.
Задайте за него No Fill и прибавете stroke с цвят като този на контура на файловете, които транспортирахме във Фотошоп - Cloud 1,2 и 3



Направете скицата невидима (клик на оченцето на tamplete layer-a) и запазете файла.

В следващата тема първо ще транспортираме векторното октоподче във Фотошоп, за да редактираме цветовете според фона. След това ще продължим с работата в Илюстратор.

В тази тема ще довършим дизайна на плакат във векторен стил “Сноубордист“ от предните две теми.
Етапите на работа може да проследите в Първа и Втора част на комбинирания урок за Photoshop и Illustrator

Ето как изглежда плаката до тук:



Продължаваме с дизайна...


30. Ще добавим още една готова векторна форма от freebie пакетите на Go Media.

Копираме векторната форма vector spine, поставяме я във фотошоп и правим няколко копия.

Завъртаме копията, така че да се създаде радиален образ, който излиза от ръката на сноубордиста.



Когато сте готови с позиционирането, слейте всички копия на векторната форма. Придайте им синкав оттенък и намалете прозрачността.



31. Седма векторна форма - Диагонални линии
Започваме със създаването на една наклонена линия под ъгъл 45 градуса. След това използваме вече познатата ни техника за многократно клониране (селектирате с Direct Selection Tool първата линия, натискате клaвиша Alt, задържате го и придвижвате напред).

В крайна сметка трябва да се получи ето това:



32. Селектираме линиите заедно. Копираме ги и ги поставяме във фотошоп.
Променяме режима на смесване на Overlay 50%.

След това активираме селекцията, която направихме от пътечката на планината.
Обръщаме селекцията (Select > Inverte). После дайте клик на слоя с линиите и изтрийте онази част от тях, която се намира над върховете на планината.



33. Може да направим планината по-контрастна.
За целта дублирайте слоя и променете режима на смесване на копието на Multiply 40%.

Сега ще поставим още векторни пръски от пакета 117.eps
Копирайте и поставете във фотошоп над слоя с векторните кръгове.

Селектирайте слоя с пръските (Ctrl+клик на малката картинка на слоя в палитрата на слоевете) и изтрийте всичко от него, което се намира върху слоевете на кръговете и планината (клик на слоя с кръговете. Селекцията на пръските е активна. DELETE. За планината по същия начин).



Приспособете цвета на векторните пръски към цветовата гама на плаката:





34. Сега ще добавим още малко свежест към творбата си.
За целта ще използваме снимка на пръски подобна на тази:



Сток фотографията, която е използвана в урока е лицензирана и за съжаление не може да бъде публикувана, но вие можете и сами да си направите подобна снимка.

Става по следния начин:
Преобразувате изображението в черно-бяло (Image > Adjustments > Desaturate).
След това променяте levels и Brightness/Contrast.
Целта е да получите черен фон и бели пръски.

После копирайте пръските и ги поставете под сноубордиста. Променете режима на смесване на Screen. Коригирайте levels за по-добър ефект.



35. Сега вземете голяма четка Spray Paint Photoshop Brushes от Go Media и направете няколко ”петна” под сноубордиста за засилване на ефекта.



36. Ще използваме още един набор от четки Watercolour brushes от Bittbox.
Изберете тази, която е показана на картинката и рисувайте с нея по краищата на плаката.



Със същата четка вземете гумата с 50% прозрачност и изтрийте по вътрешните краищата на нарисуваните току-що ”петна”.



Променяме режима на смесване на слоя на Overlay 50%, за да се получи ледена текстура за нашето произведение:



37. Разгледайте още веднъж работата си и доработете детайлите, които мислите, че имат нужда от това.

Може да добавите още пръски под протегнатата ръка на сноубордиста, например. Направете това, като дублирате слоя с пръските.



В трите последователни части на туториала Сноубордист - плакат във векторен стил видяхме метода на работа на автора за създаването конкретно на този плакат:




Разбира се, има и други начини, с които може да се постигне същия резултат. Не е необходимо да се придържате стриктно към урока, нито пък да използвате съвсем същите ресурси.

Един от ключовите моменти в урока е създаването на собствен арсенал от ресурси за вашите бъдещи проекти.

Техниката за изработването на плакат във векторен стил, показана в този урок спокойно може да се използва при работата върху плакати с различна тематика.

Освободете въображението си, използвайте наученото и създайте вашите невероятни плакати.

Ето моя скромен опит:
векторен плакат “Каратист“



автор: Chris Spooner
Източник
превод: mARTa

Продължаваме с втората част на урока за изработване на плакат във векторен стил.
В първата част поставихме обект (снимка на сноубордист), изработихме фон на плаката и прибавихме някои векторни форми към дизайна.

Работата ни до тук изглежда така:



Сега ще продължим да добавяме векторни форми към дизайна на плаката.


16. Отворете с Илюстратор vector splatters.
Селектирайте формата. Променете цвета й на бял. Копирайте я и я поставете във фотошоп под слоя с кръговете.



17. Повторете стъпките с Image/Adjustments/Hue/Saturation и градиента, както направихме това с кръговете в предната тема.

Не забравяйте да изтриете пръските, които попадат върху планината (активирате селекцията от пътечката на планината, кликвате на слоя с пръските и давате DELETE)

18. Отворете векторния пакет Punk.
Копирайте звездата.



19. Поставете я във фотошоп.
Направете няколко копия, като намалявате размера.
Разположете групичката от звезди зад ръката на сноубордиста, така че да образува нещо като следа, както е показано на картинката:



20. Нагласете цвета с помощта на Hue/Saturation на тъмносин.



21. Четвърта векторна форма - Наклонени линии.
Върнете се в Илюстратор, създайте малък кръг.
С помощта на Selection Tool извлачете левите точки наляво и десните надясно, така че да се получи фиг. 3 от картинката.



22. Когато формата е готова и селектирана, кликнете на бутончето New в панела на четките.
Избираме опцията New Art Brush.
Уверете се, че direction е разположен по продължение на ширината в диалоговия прозорец:



23. Създайте траекторията на пътя (с Pen Tool), по който ще минава четката.
След това с активна пътечка кликнете на новата четка.
Ще видите, че пътечката се запълва с току-що създадената четка.
Копирайте, поставете и малко наклонете пътечката.



24. Селектирайте двете пътечки заедно.
От менюто изберете Object/Blend/Blend Options с параметри Spacing -> Specified Steps -> 20:



Върнете се обратно Object/Blend и дайте Make.

Направете векторната форма бяла. Копирайте и поставете във фотошоп така, че все едно излита изпод сноубордиста.
Променете режима на смесване на слоя на Soft Light.



25. Увеличете документа.
С помощта на Pen Tool създайте пътечка по контура на ”модерните кръгове”.
Превърнете пътечката в селекция и изтрийте частта от ”наклонените линии”, която остава под кръговете, както е показано на картинката:



26. Пета векторна форма - Завиващи линии.
Връщаме се отново в Илюстратор. Начертайте с Pen Tool вектор като този:



Селектирайте го и го дублирайте. Наклонете копието с помощта на стрелкичката, която се получава, щом курсора на мишката се насочи към горния ъгъл.

След това намалете размера на копието, като издърпате навътре срещуположния долен ъгъл.

Повторете този процес многократно. Трябва да се получи спирала като тази:

Щом формата ви е готова, селектирайте всички вектори заедно и вземете четката, която създадохме по-рано в урока. Ще видите, че векторите се запълват с нея.

27. Копирайте векторната форма и я поставете във фотошоп.
Създайте още две копия. Разположете ги от едната страна на сноубордиста. Леко ги наклонете и променете режима им на смесване на Overlay 50%.



Селектирайте трите векторни спирали заедно. Копирайте ги и ги поставете от другата страна на сноубордиста, като използвате функцията на Free Transform - Flip horizontal, за да се получи симетричен образ.



28. Шеста векторна форма - Много завиващи линии.
Тази форма създайте по подобие на предишната (завиващите линии), по същия начин я запълнете с четката.



След това копирайте и поставете във фотошопския си файл по вертикал от двете страни на плаката:



Увеличете размера им така, че да излизат извън работното пространство. Променете режима на смесване на Overlay.

29. С Илюстратор отворете отново векторният пакет Punk
Копирайте звездата в стил ретро:



Разгрупирайте:
Клик на звездата с Direct Selection Tool и изменете белите области. Запълнете със син цвят, подходящ за нашия плакат (за Fill задайте синьо, Stroke оставете черно, както си е).

Копирайте и поставете във фотошопския файл.
Направете няколко варианта на звездата и ги разположете от дясната страна на сноубордиста:



В следващата тема ще довършим дизайна на плаката.