Ավարտելուց հետո մի նախագիծ, որը պահանջում էր ինձնից սովորել այն ամենը, ինչ կարող էի CSS և SVG անիմացիաների մասին, ես սկսեցի գրել այս շարքը Smashing Animations-ի և «How Classic Cartoons Inspire Modern CSS»-ի մասին։ Այս տարին ավարտելու համար ես ուզում եմ ձեզ ցույց տալ, թե ինչպես օգտագործել ժամանակակից CSS-ն՝ ստեղծելու այն տարրը, որն այնքան ազդեցիկ է դարձնում Toon Titles-ը՝ նրանց տպագրությունը: Title Արվեստի ստեղծագործության ձևավորում 1920-ականների և 30-ականների սկզբի համր դարաշրջանում ֆիլմի տիտղոսաթերթի տպագրությունը տրամադրություն էր ստեղծում, տեսարան էր ստեղծում և հանդիսատեսին հիշեցնում այն ֆիլմի տեսակը, որը նրանք վճարել էին դիտելու համար:
Մուլտֆիլմի վերնագրի բացիկները նաև բրենդինգ էին, տրամադրություն և տեսարան՝ բոլորը միաձուլված: Վաղ տարիներին, երբ ստուդիայի հիմնական բյուջեն ավելի մեծ էր, վերնագրի այս քարտերը հաճախ պատկերավոր և նկարչական էին:
Բայց երբ 1950-ականներին հեռուստատեսությունը վերելք ապրեց, բյուջեները նվազեցին, և Լոուրենս «Արվեստ» Գոբլի նման արվեստագետների կողմից նախագծված բացիկները որդեգրեցին նոր տեսողական լեզու՝ դառնալով ավելի գրաֆիկական, ոճավորված և ավելի քիչ բարդ: Նշում. Լոուրենս «Արվեստ» Գոբլը միջին դարի ամերիկյան անիմացիայի հաճախ անտեսված հերոսներից է: Նա հիմնականում աշխատել է Հաննա-Բարբերայի համար 1950-ականների և 1960-ականների ամենաազդեցիկ տարիներին: Գոբլը կերպարների մուլտիպլիկատոր չէր: Նրա դերը մթնոլորտ ստեղծելն էր, ուստի նա նախագծեց միջավայրեր The Flintstones-ի, Huckleberry Hound-ի, Quick Draw McGraw-ի և Yogi Bear-ի համար, ինչպես նաև բացման տիտղոսաթերթիկներ, որոնք երանգ են տալիս: Նրա տիտղոսաթերթերը, որոնց վրա պատկերված էին պատկերանշանով նկարներ, օգնեցին սահմանել Հաննա-Բարբերայի խորհրդանշական տեսքը: Գոբլի ստեղծագործությունները այնպիսի կերպարների համար, ինչպիսիք են Quick Draw McGraw-ն և Yogi Bear-ը, արդյունավետ էին փոքր հեռուստաէկրանների վրա: Մուլտֆիլմից մի կադր վերարտադրելու փոխարեն նա կենտրոնացավ մեկ, ուժեղ գաղափար ներկայացնելու վրա, որը հաճախ ուրվագիծ էր ներկայացնում, որն ընդգրկում էր դրա էությունը: «The Buzzin’ Bear»-ում Յոգին ուղղաթիռով զնգում է: Նա ցատկում է հեռու՝ նկարելու զամբյուղը ձեռքին, «Bear on a Picnic»-ում, իսկ իր «Prize Fight Fright»-ի համար Յոգին վանդակում է վերնագրի տեքստը:
Հենվելու համար քիչ կամ առանց որևէ շարժման, Գոբլի առանձին կադրերը պետք է տրամադրություն ստեղծեին, տեսարան ստեղծեին և նկարագրեին պատմություն: Նրանք դա արեցին՝ օգտագործելով հարթ գույներ, գրաֆիկական ձևեր և տպագրություն, որը հաճախ ինտեգրվում էր արվեստի գործին:
Որպես դիզայներներ, ովքեր աշխատում են համացանցում, Toon անվանումները կարող են մեզ շատ բան սովորեցնել, թե ինչպես փոխանցել ապրանքանիշի անհատականությունը, թողնել առաջին տպավորությունը և ակնկալիքներ դնել որևէ մեկի փորձից՝ օգտագործելով ապրանքը կամ կայքը: Մենք կարող ենք սովորել նկարիչների մեթոդներից՝ ստեղծելու արդյունավետ պաստառներ, վայրէջքի էջի վերնագրեր և նույնիսկ լավ մոդայիկ էկրաններ: Toon Title Typography Մուլտֆիլմի վերնագրի քարտերը ցույց են տալիս, թե ինչպես է տիպի միաձուլումը պատկերների հետ տալիս այն հարվածը, որն անհրաժեշտ է վերնագրին կամ հերոսին: Ժամանակակից CSS-ը թույլ է տալիս օգտագործել նույն էներգիան, օգտագործելով մի քանի տեքստային ստվերային, տեքստային հարված և փոխակերպման հնարքներ:
Toon Text Title Generator Այս հոդվածը գրելուց հետո ես հասկացա, որ օգտակար կլինի ունենալ տեքստի ստեղծման գործիք՝ ոճավորված մուլտֆիլմերի վերնագրերի նման, որոնք ես շատ եմ սիրում: Այսպիսով, ես պատրաստեցի մեկը: My Toon Text Title Generator-ը թույլ է տալիս փորձարկել գույները, հարվածները և տեքստի բազմաթիվ ստվերները: Դուք կարող եք կարգավորել ներկերի հերթականությունը, կիրառել տառերի տարածությունը, նախադիտել ձեր տեքստը ընտրանքային տառատեսակների մեջ և այնուհետև պատճենել ստեղծված CSS-ն անմիջապես ձեր clipboard-ում՝ նախագծում օգտագործելու համար: Toon Title CSS Դուք կարող եք պարզապես պատճենել-տեղադրել CSS-ը, որը ձեզ տրամադրում է Toon Text Title Generator-ը: Բայց եկեք ավելի սերտ նայենք, թե ինչ է դա անում: Տեքստի ստվեր Տեսեք այս վերնագրի տեսակը Օգի Դոգգիի «Յուկ-Յուկ բադ» դրվագից՝ իր գունատ դեղին տառերով և մուգ, կոշտ, շեղված ստվերով, որը բարձրացնում է այն ֆոնից և ստեղծում խորության պատրանք:
Դուք հավանաբար արդեն գիտեք, որ text-shadow-ն ընդունում է չորս արժեք՝ (1) հորիզոնական և (2) ուղղահայաց շեղումներ, (3) blur և (4) գույն, որը կարող է լինել ամուր կամ կիսաթափանցիկ: Այդ օֆսեթ արժեքները կարող են լինել դրական կամ բացասական, այնպես որ ես կարող եմ կրկնել «Յուկ-Յուկ բադը»՝ օգտագործելով կոշտ ստվերը, որը քաշված է ներքև և աջ: գույնը՝ #f7f76d; տեքստ-ստվեր՝ 5px 5px 0 #1e1904;
Մյուս կողմից, այս «Pint Giant» վերնագիրը այլ զգացողություն ունի իր բացասական կիսափափուկ ստվերով. գույնը՝ #c2a872; text-shadow: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Լրացուցիչ խորություն ավելացնելու և ավելի հետաքրքիր էֆեկտներ ստեղծելու համար ես կարող եմ մի քանի ստվերներ շերտավորել: «Let’s Duck Out»-ի համար ես համատեղում եմ չորս ստվերներ. առաջինը պինդ ստվերն է բացասական հորիզոնական շեղումով՝ տեքստը ֆոնից հանելու համար, որին հաջորդում են աստիճանաբար ավելի մեղմ ստվերները՝ դրա շուրջը մշուշոտություն ստեղծելու համար: գույնը՝ #6F4D80; text-shadow: -5px5px 0 #260e1e, /* Shadow 1 */ 0 0 15px #e9ce96, /* Shadow 2 */ 0 0 30px #e9ce96, /* Shadow 3 */ 0 0 30px #e9ce96; /* Shadow 4 */
Այս ստվերները ցույց են տալիս, որ տեքստային ստվերի օգտագործումը միայն լուսային էֆեկտներ ստեղծելու համար չէ, քանի որ դրանք կարող են նաև դեկորատիվ լինել և անհատականություն հաղորդել: Տեքստային հարված Մուլտֆիլմերի վերնագրերի շատ բացիկներ պարունակում են թավ ուրվագիծ ունեցող տառեր, որոնք դրանք առանձնանում են ֆոնից: Ես կարող եմ վերստեղծել այս էֆեկտը՝ օգտագործելով text-stroke: Երկար ժամանակ այս հատկությունը հասանելի էր միայն -webkit- նախածանցի միջոցով, բայց դա նաև նշանակում է, որ այն այժմ աջակցվում է ժամանակակից բրաուզերներում:
text-stroke-ը երկու հատկության սղագրություն է: Առաջինը՝ տեքստի շրթունք-լայնությունը, ուրվագծում է առանձին տառերի շուրջը, իսկ երկրորդը՝ տեքստի հարված-գույնը, վերահսկում է դրա գույնը: «Whatever Goes Pup»-ի համար ես դեղին տեքստին ավելացրի 4px կապույտ տող. գույնը՝ #eff0cd; -webkit-text-stroke՝ 4px #7890b5; text-stroke՝ 4px #7890b5;
Հարվածները կարող են հատկապես օգտակար լինել, երբ դրանք համակցված են ստվերների հետ, այնպես որ «Աճում, աճում, անհետացել» համար ես ավելացրել եմ բարակ 3px շարժում հազիվ լղոզված 1px ստվերին՝ ստեղծելու այս եռաչափ տեքստի էֆեկտը. գույնը՝ #fbb999; տեքստ-ստվեր՝ 3px 5px 1px #5160b1; -webkit-text-stroke՝ 3px #984336; text-stroke՝ 3px #984336;
Ներկերի պատվեր Տեքստային հարվածի օգտագործումը միշտ չէ, որ տալիս է ակնկալվող արդյունքը, հատկապես ավելի բարակ տառերով և ավելի հաստ հարվածներով, քանի որ լռելյայնորեն զննարկիչը հարված է նկարում լրացման վրա: Ցավոք, CSS-ը դեռ թույլ չի տալիս ինձ հարմարեցնել հարվածների տեղադրումը, ինչպես ես հաճախ եմ անում Sketch-ում: Այնուամենայնիվ, paint-order հատկությունն ունի արժեքներ, որոնք թույլ են տալիս ինձ տեղադրել հարվածը լցոնման հետևում, այլ ոչ թե դիմաց:
Paint-order. stroke-ը նախ նկարում է հարվածը, այնուհետև լցոնումը, մինչդեռ ներկ-կարգը՝ fill-ն անում է հակառակը. գույնը՝ #fbb999; ներկ-պատվեր՝ լրացնել; տեքստ-ստվեր՝ 3px 5px 1px #5160b1; text-stroke-color:#984336; text-stroke-width՝ 3px;
Արդյունավետ հարվածը տառերը ընթեռնելի է պահում, ավելացնում է քաշը և, երբ համակցվում է ստվերների և ներկերի կարգի հետ, հարթ տեքստի իրական ներկայություն է հաղորդում: Նախապատմություն տեքստի ներսում Շատ մուլտֆիլմի վերնագրի քարտեր դուրս են գալիս հարթ գույնից՝ տառերին ավելացնելով հյուսվածք, գրադիենտ կամ պատկերազարդ մանրամասներ: Երբեմն դա հյուսվածք է, երբեմն դա կարող է լինել գրադիենտ՝ նուրբ տոնային տեղաշարժով: Համացանցում ես կարող եմ վերստեղծել այս էֆեկտը՝ օգտագործելով ֆոնային պատկեր կամ գրադիենտ տեքստի հետևում, այնուհետև այն կտրելով տառերի ձևին: Սա հիմնված է երկու հատկությունների վրա, որոնք աշխատում են միասին՝ ֆոնային հոլովակ՝ տեքստ և տեքստի լրացման գույն՝ թափանցիկ:
Նախ, ես տեքստի հետևում ֆոն եմ կիրառում: Սա կարող է լինել bitmap կամ վեկտորային պատկեր կամ CSS գրադիենտ: Quick Draw McGraw-ի «Baba Bait» դրվագից այս օրինակի համար վերնագրի տեքստը ներառում է վերևից ներքևի նուրբ գրադիենտ մութից դեպի լույս. ֆոն՝ գծային-գրադիենտ (0deg, #667b6a, #1d271a);
Այնուհետև ես սեղմում եմ այդ ֆոնը հոլովակների վրա և տեքստը դարձնում եմ թափանցիկ, որպեսզի ֆոնը երևա՝ -webkit-background-clip՝ տեքստ; -webkit-text-fill-color՝ թափանցիկ;
Միայն այդ երկու տողով տեքստի հետևում ֆոնն այլևս չի նկարվում. դրա փոխարեն այն ներկված է դրա մեջ: Այս տեխնիկան հատկապես լավ է աշխատում, երբ զուգակցվում է հարվածների և ստվերների հետ: Կտրված գրադիենտը տառերը տալիս է գույնով և հյուսվածքով, հարվածը սուր է պահում դրա եզրերը, իսկ ստվերը բարձրացնում է այն ֆոնից: Նրանք միասին վերստեղծում են ձեռքով նկարված վերնագրի քարտերի շերտավոր տեսքը՝ օգտագործելով ոչ ավելին, քան մի փոքր CSS: Ինչպես միշտ, զգուշորեն փորձարկեք կտրված տեքստը, քանի որ դիտարկիչի տարօրինակությունները երբեմն կարող են ազդել ստվերների և մատուցման վրա: Տեքստի բաժանումը անհատական կերպարների Երբեմն ես չեմ ուզում ոճավորել մի ամբողջ բառ կամ վերնագիր: Ես ուզում եմ ոճավորել առանձին տառեր՝ ստիպել կերպարը տեղ դնել, մեկ հոլովակի լրացուցիչ քաշ տալ կամ մի քանի տառ ինքնուրույն կենդանացնել: Պարզ HTML-ում և CSS-ում դա անելու միայն մեկ հուսալի միջոց կա՝ յուրաքանչյուր նիշը փաթաթել իր սեփական span տարրի մեջ: Ես կարող էի դա անել ձեռքով, բայց դա կլինի փխրուն, դժվար է պահպանել, և արագ կփլուզվի, երբ պատճենը փոխվի: Փոխարենը, երբ ինձ յուրաքանչյուր տառի կառավարում է անհրաժեշտ, ես օգտագործում եմ տեքստը բաժանող գրադարան, ինչպիսին է splt.js-ը (չնայած այլ լուծումներ կան): Սա վերցնում է տեքստային հանգույց և ավտոմատ կերպով փաթաթում բառերը կամ նիշերը՝ տալով ինձ լրացուցիչ կեռիկներ՝ կենդանացնելու և ոճավորելու համար՝ առանց իմ նշագրումը խառնելու: Դա մի մոտեցում է, որը պահում է իմ HTML-ը ընթեռնելի և իմաստային, միևնույն ժամանակ ինձ տալիս է նուրբ հսկողություն, որն անհրաժեշտ է վերստեղծելու անհավասար, բնավորությամբ տպագրությունը, որը տեսնում եք դասական մուլտֆիլմի վերնագրերի քարտերում: Այնուամենայնիվ, այս մոտեցումը գալիս էմատչելիության նախազգուշացումներ, քանի որ էկրանի ընթերցողների մեծ մասը կարդում է տեքստային հանգույցները հերթականությամբ: Այսպիսով, սա.
Hum Sweet Hum
…կարդում է այնպես, ինչպես ակնկալում էիք. Hum Sweet Hum
Բայց սա.