Adobe Illustratorలో పారదర్శక GIF క్రింది విధంగా చేయబడుతుంది. మెను ఫైల్‌కి వెళ్లండి > వెబ్ & పరికరాల కోసం సేవ్ చేయండి (Alt+Ctrl+Shift+S). తెరిచే విండోలో, ఆప్టిమైజ్ చేసిన ఫైల్ ఫార్మాట్ ఫీల్డ్‌లో, మీరు మొదట ట్యాబ్‌కు వెళ్లాలి చిత్ర పరిమాణం(చిత్ర పరిమాణం). వాస్తవం ఏమిటంటే, మొత్తం పేజీ డిఫాల్ట్‌గా ఆప్టిమైజేషన్ విండోలోకి వస్తుంది మరియు ఇది సాధారణంగా అవసరం లేదు. కాబట్టి, ఇమేజ్ సైజు ట్యాబ్‌లో, చెక్‌బాక్స్ ఎంపికను తీసివేయండి ఆర్ట్‌బోర్డ్‌కు క్లిప్ చేయండి(పేజీకి సరిపోయేలా కత్తిరించండి) మరియు వర్తించు బటన్‌ను క్లిక్ చేయండి.

ఆపై, ఫార్మాట్ ఎంపిక జాబితాలో, GIFని ఎంచుకుని, పారదర్శకత చెక్‌బాక్స్‌ని తనిఖీ చేయండి.

ఆ తరువాత, ఏ రంగులు పారదర్శకంగా ఉంటాయో మేము నిర్ణయిస్తాము. చిత్రంలో ఉన్న అన్ని రంగులు ట్యాబ్‌లో ఉంటాయి రంగు పట్టిక(రంగు చార్ట్) మరియు రంగు చతురస్రాలుగా ప్రదర్శించబడతాయి. విండో యొక్క ఎడమ వైపున ఉన్న టూల్‌బార్ నుండి సాధనాన్ని ఎంచుకోండి కంటిచూపు(పైపెట్).

రంగులను రెండు విధాలుగా నిర్వచించవచ్చు. చిత్రంపై నేరుగా ఐడ్రాపర్‌తో రంగును పేర్కొనడం సులభమయిన మార్గం - ఆ తర్వాత రంగు డార్క్ స్ట్రోక్‌తో కలర్ టేబుల్‌పై హైలైట్ చేయబడుతుంది. సరే, ఏ రంగు పారదర్శకంగా ఉండాలో మీకు ఖచ్చితంగా తెలిస్తే, సంబంధిత రంగు పెట్టెను క్లిక్ చేయడం ద్వారా మీరు నేరుగా రంగు పట్టికలో దాన్ని ఎంచుకోవచ్చు. మరియు మొదటి మరియు రెండవ సందర్భాలలో, మీరు అనేక రంగులను ఎంచుకోవాల్సిన అవసరం ఉంటే, మీరు Shift (లేదా Ctrl) కీని నొక్కినప్పుడు పని చేయాలి. రంగును ఎంచుకున్న తర్వాత, దానిని పారదర్శకంగా చేయడానికి మీరు ప్రోగ్రామ్‌ను సూచించాలి. దీన్ని చేయడానికి, చిహ్నంపై క్లిక్ చేయండి మ్యాప్‌లు పారదర్శకంగా రంగులను ఎంచుకున్నాయి(పారదర్శకతకు ఎంచుకున్న రంగులను జోడించండి). చిత్రంలో, ఈ బటన్ సర్కిల్ చేయబడింది మరియు ఎరుపు రంగు పారదర్శకంగా సెట్ చేయబడింది. చిత్రంపై పారదర్శక ప్రాంతం కనిపిస్తుంది, మరియు రంగు పట్టికలోని చతురస్రం దాని రూపాన్ని మారుస్తుంది - దానిలో కొంత భాగం తెల్లని త్రిభుజం అవుతుంది. ఎంచుకున్న రంగును రద్దు చేయడానికి, మీరు దానిని రంగు పట్టికలో ఎంచుకోవాలి, ఆపై మ్యాప్స్ ఎంచుకున్న రంగులను పారదర్శకంగా మార్చడానికి మళ్లీ క్లిక్ చేయండి.

పారదర్శకతను సెట్ చేసే పద్ధతి గురించి కొన్ని మాటలు. డ్రాప్‌డౌన్ మెను దీనికి బాధ్యత వహిస్తుంది. పారదర్శకత డైథర్ అల్గోరిథంను పేర్కొనండి, రష్యన్ భాషలో - పారదర్శకత అనుకరణ అల్గోరిథం (అత్తి. క్రింద). నాలుగు ఎంపికలు ఉన్నాయి: నో ట్రాన్స్‌పరెన్సీ డైథర్ - అల్గోరిథం లేదు, డిఫ్యూజన్ ట్రాన్స్‌పరెన్సీ డైథర్ - డిఫ్యూజ్ అల్గోరిథం, ప్యాటర్న్ ట్రాన్స్‌పరెన్సీ డైథర్ - ప్యాటర్న్ ఆధారిత అల్గారిథమ్ మరియు నాయిస్ ట్రాన్స్‌పరెన్సీ డైథర్ - నాయిస్ ఆధారిత అల్గారిథమ్. డిఫ్యూజ్ అల్గోరిథం మోడ్‌లో, స్లయిడర్ సక్రియం అవుతుంది మొత్తం(మొత్తం) మీరు వ్యాప్తి విలువను మార్చడానికి అనుమతిస్తుంది. ఆచరణలో ఏమి దరఖాస్తు చేయాలి? ప్రయోజనం మరియు చిత్రంపై ఆధారపడి ఉంటుంది. నేను ఈ ఎంపికను ఉపయోగించను మరియు ఎల్లప్పుడూ డిఫాల్ట్‌గా వదిలివేస్తాను - పారదర్శకత లేదు.

సేవ్ నొక్కండి - పారదర్శక GIF సిద్ధంగా ఉంది. పని Adobe Illustrator వెర్షన్ CS4 (v.14)లో జరిగింది, అయితే అన్ని చర్యలు మరియు కీబోర్డ్ సత్వరమార్గాలు మునుపటి సంస్కరణ CS3 (v. 13)కి సంబంధించినవి.

ఇప్పుడు పనిని కొంచెం క్లిష్టతరం చేద్దాం - యానిమేటెడ్ ఫ్లాష్ బ్యానర్‌ని తయారు చేద్దాం. వాస్తవానికి, ఈ సందర్భంలో పూర్తి స్థాయి ఫ్లాష్ యానిమేషన్ గురించి మాట్లాడవలసిన అవసరం లేదు - దీని కోసం ప్రత్యేక ప్యాకేజీలు ఉన్నాయి. కానీ మీరు సరళమైన, ఔత్సాహిక వీడియోను రూపొందించడానికి చిత్రకారుడిని కూడా ఉపయోగించవచ్చు.

Adobe Illustratorలో యానిమేషన్ డెవలప్‌మెంట్ ప్రోగ్రామ్‌ల కోసం ప్రత్యేకమైన టైమ్‌లైన్ వంటి ప్రత్యేక సాధనాలు మరియు ఇంటర్‌ఫేస్ సాధనాలు ఏవీ లేవు. కానీ ఒక సూక్ష్మభేదం ఉంది - పొరలను ఫ్రేమ్‌లుగా ఉపయోగించవచ్చు.

కేవలం వచనంతో బ్యానర్‌ను సృష్టించండి.

1. ఆదేశంతో చిహ్నాలను సమూహపరచండి వస్తువు › సమూహం(వస్తువు › సమూహం).
2. ఫాంట్ అక్షరాల నుండి ఆకృతి వస్తువులను తయారు చేయడం తదుపరి పని, లేకుంటే పొరల యొక్క సరైన నిర్మాణం పనిచేయదు. దీన్ని చేయడానికి, సమూహాన్ని ఎంచుకుని, ఎంచుకోండి రకం › అవుట్‌లైన్‌లను సృష్టించండి(ఫాంట్ › ట్రేస్).
3. ఆ తర్వాత పాలెట్ మెనుని తెరవండి పొరలు(పొరలు) ప్యాలెట్‌లోని బాణం రూపంలో బటన్‌పై క్లిక్ చేయడం ద్వారా (Fig. 8.11).

అన్నం. 8.11. లేయర్‌ల పాలెట్ మెను

ఈ మెనులోని ఆదేశంపై మాకు ఆసక్తి ఉంది లేయర్‌కి విడుదల (క్రమం)(లేయర్‌లుగా మార్చండి (సీక్వెన్షియల్‌గా)) ఇది ప్రతి ఒక్క వస్తువును కొత్త లేయర్‌లోకి అనువదిస్తుంది. ఆదేశాన్ని వర్తింపజేసేటప్పుడు, సమూహాన్ని తప్పనిసరిగా ఎంచుకోవాలని దయచేసి గమనించండి సమూహం, పొర కాదు పొర 1.

ప్యాలెట్ ఎలా ఉండాలి పొరలు(పొరలు) అమలు తర్వాత లేయర్‌కి విడుదల (క్రమం)(పొరలుగా మార్చండి (సీక్వెన్షియల్)), అంజీర్‌లో చూపబడింది. 8.12

అన్నం. 8.12. లేయర్‌కి విడుదల తర్వాత లేయర్‌ల పాలెట్ (సీక్వెన్స్)

ఇది తయారీని పూర్తి చేస్తుంది, మీరు ఉపయోగించి సేవ్ చేయవచ్చు వెబ్ కోసం సేవ్ చేయండి(వెబ్ కోసం సేవ్ చేయండి) SWFకి. SWFఫ్లాష్ టెక్నాలజీల ఆధారంగా ప్రధాన గ్రాఫిక్స్ ఫార్మాట్. ఇది ఫ్లాష్ ఫార్మాట్ (Fig. 8.13) అని చెప్పడం మరింత ఖచ్చితమైనది.

బహుశా, నేడు వినియోగదారులందరికీ ఫ్లాష్‌తో ఎక్కువ లేదా తక్కువ సుపరిచితం. ఇది ప్రస్తుతం ఇంటర్నెట్‌లో అత్యంత సాధారణ యానిమేషన్ ఫార్మాట్ మరియు చాలా వరకు మల్టీమీడియా వెబ్ పేజీలను రూపొందించడానికి ఉపయోగించబడుతుంది.

వాస్తవానికి, అడోబ్ ఇలస్ట్రేటర్‌లో ఫ్లాష్ సామర్థ్యాలలో పదోవంతు కూడా అమలు చేయబడదు, ఎందుకంటే ప్రోగ్రామ్ దీని కోసం రూపొందించబడలేదు. అయితే, ఇందులో మీరు స్టాటిక్ పిక్చర్ లేదా సింపుల్ యానిమేషన్ చేయవచ్చు.

అన్నం. 8.13. SWF ఫార్మాట్ కోసం ఆప్టిమైజేషన్ సెట్టింగ్‌లు

కింది సెట్టింగ్‌లు ఉన్నాయి.

• చదవడానికి మాత్రమే(పఠనం మాత్రమే). మీరు పెట్టెను చెక్ చేస్తే, ఫైల్ ఏ ​​ప్రోగ్రామ్‌లోనూ సవరించడానికి తెరవబడని విధంగా వ్రాయబడుతుంది. ఇది, ఒకవైపు, ఫైళ్ల పరిమాణాన్ని తగ్గిస్తుంది మరియు మరోవైపు, మీ కాపీరైట్‌లను రక్షిస్తుంది.
• లేబుల్ చేయబడిన సెట్టింగ్ 1. సేవ్ చేసే రకాన్ని పేర్కొనే పరామితి - ఇమేజ్ లేదా యానిమేషన్.
• మీరు ఎంపికను ఎంచుకుంటే AI ఫైల్ నుండి SWF ఫైల్(ఇలస్ట్రేటర్ ఫైల్ నుండి SWF ఫైల్ వరకు), ఇలస్ట్రేటర్‌లో పని చేస్తున్నప్పుడు మీరు స్క్రీన్‌పై చూసే విధంగానే చిత్రం స్టాటిక్ ఇమేజ్‌గా సేవ్ చేయబడుతుంది.
• SWF ఫ్రేమ్‌లకు పొరలు(లేయర్‌లు టు SWF ఫ్రేమ్‌లు) ఇప్పటికే ఉన్న లేయర్‌లను యానిమేట్ చేయడానికి మిమ్మల్ని అనుమతిస్తుంది, అవి ఫ్రేమ్‌లుగా రెండర్ చేయబడతాయి. మేము ఈ ఎంపికను ఎంచుకోవాలి.
• కర్వ్ నాణ్యత(వంపుల నాణ్యత). అసలు చిత్రం యొక్క వక్రరేఖల ఫైల్‌ను పునరావృతం చేసే వక్రత యొక్క ఖచ్చితత్వం. ఈ సెట్టింగ్‌ను తగ్గించడం వలన నాణ్యత గణనీయంగా తగ్గుతుంది, ముఖ్యంగా చిన్న వివరాల ప్రాంతంలో, కానీ ఫైల్ పరిమాణాన్ని తగ్గిస్తుంది. మా విషయంలో, సరైన విలువ "7".
• ఫ్రేమ్ రేటు(ఫ్రేమ్ ఆలస్యం). ఫ్రేమ్ రేట్ మరియు, ఫలితంగా, యానిమేషన్ వేగం. ప్రభావం సరిగ్గా ఉండాలంటే, సెకనుకు 4 ఫ్రేమ్‌ల కంటే ఎక్కువ సెట్ చేయవద్దు.
• లూప్(పునరావృతం). అనేక సార్లు యానిమేషన్ ప్లే చేయండి. పునరావృత లూప్ ముఖ్యమైన యానిమేషన్‌లకు అనుకూలం. బ్యానర్ ఈ రకానికి చెందినది.

అడోబ్ ఇలస్ట్రేటర్ మరియు ఆఫ్టర్ ఎఫెక్ట్స్
దిగుమతి మరియు సాధారణ యానిమేషన్

హలో. ఈ రోజు మనం ఆఫ్టర్ ఎఫెక్ట్స్‌లో ఒక సాధారణ యానిమేషన్‌ను సమీక్షిస్తున్నాము.

వనరులు: అడోబ్ ఇలస్ట్రేటర్ CC
అడోబ్ ఆఫ్టర్ ఎఫెక్ట్స్ CC

ఇలస్ట్రేటర్‌లో గీయడం ద్వారా ప్రారంభిద్దాం.

మేము గీస్తాము
1) నేపథ్యంగా పసుపు దీర్ఘచతురస్రాన్ని గీయండి

మూర్తి 1 - దీర్ఘ చతురస్రం

2) ఒక వృత్తాన్ని గీయండి మరియు దానిని గ్రేడియంట్‌తో నింపండి
సర్కిల్‌లో కొంచెం పని చేద్దాం:
- ఆకృతిపై దిగువ బిందువును తొలగించండి, మేము ఒక ఆర్క్ పొందుతాము;
- ఒక సరళ రేఖను గీయండి, ఆర్క్ దిగువన మూసివేయడం, మేము ఒక అర్ధ వృత్తాన్ని పొందుతాము

చిత్రం 2 - 1) వృత్తం గీయండి; 2) ప్రవణత; 3) పాయింట్ తొలగించండి

3) దీర్ఘచతురస్రాన్ని గీయండి మరియు దాని కాపీని చేయండి
- ఒక బూడిద దీర్ఘచతురస్రం;
- మరొక ముదురు బూడిద దీర్ఘచతురస్రం
4) కిరణాల సంఖ్యను సెట్ చేయడం ద్వారా నక్షత్రం నుండి త్రిభుజాన్ని గీయండి - 3

మూర్తి 3 - 1) రెక్ట్ లైట్; 2) రెక్ట్ డార్క్; 3)త్రిభుజం

5) పెన్ మరియు సాధారణ ఆకృతులతో పిల్లిని గీయండి

మూర్తి 4 - 1) తల; 2) మెడ; 3) శరీరం; 4) కాలు; 5) తోక

మరియు ఇప్పుడు అత్యంత ప్రధానక్షణం
చిత్రాలను ఇలా లేయర్‌లుగా (ఏనిమేట్ చేయబడుతుంది - ప్రత్యేక లేయర్‌లో) పంపిణీ చేద్దాం:

మూర్తి 5 - అన్ని చిత్రాలు (ముఖ్యమైన పొరలను ఎరుపు గుర్తు)

ప్రతిదీ, ఇప్పుడు మేము సేవ్ చేస్తాము.
సేవ్ సెట్టింగ్స్ చూద్దాం

మూర్తి 6 - సేవ్ చేయండి

మరియు ఇప్పుడు తదుపరి దశ. దగ్గరగాఅడోబ్ ఇలస్ట్రేటర్ మరియు ఆఫ్టర్ ఎఫెక్ట్స్ తెరవండి.

ఆఫ్టర్ ఎఫెక్ట్స్‌లోకి దిగుమతి చేయండి
ఫైల్ - దిగుమతి - ఫైల్ - మా సేవ్ చేసిన ఫైల్‌ని ఎంచుకోండిచిత్రకారుడు.
ఇలస్ట్రేటర్ నుండి లేయర్‌లను దిగుమతి చేసుకోవడాన్ని ఎంచుకుందాం, మనం ఫుటేజీని ఉంచినట్లయితే, విలీనమైన లేయర్‌లతో కూడిన చిత్రం మనకు లభిస్తుంది, కానీ మనకు ఇది అవసరం లేదు.

మూర్తి 7 - కంపోజిషన్‌గా దిగుమతి చేయండి

అన్నీ దిగుమతి అయ్యాయి.
ఇప్పుడు మన దగ్గర ఏమి ఉందో చూద్దాం. కూర్పుపై డబుల్ క్లిక్ చేయండి , ఏమి తెరవబడుతుంది మరియు మేము పొరలను చూస్తాము (ప్రతిదీ సరిగ్గా జరిగితే, అనేక పొరలు ఉంటాయి). మేము దీన్ని పొందుతాము, చిత్రాన్ని చూడండి

మూర్తి 8 - ఓపెన్ కూర్పు

మరియు ఇప్పుడు మనం ఈ రోజు ఇక్కడ ఉన్నాము - యానిమేషన్.

యానిమేషన్ లో ప్రభావాలు తర్వాత
పాన్ బిహైండ్ టూల్ (షార్ట్‌కట్ - Y)తో పైవట్ పాయింట్‌ని దాని పైభాగంలో ఉన్న బాణం వద్ద సెట్ చేయండి. ఒక పాయింట్ తీసుకొని మీకు కావలసిన చోటికి తరలించండి. ఫలితంగా, ఇది ఇలా ఉంటుంది..

మూర్తి 9 - పాన్ సాధనం మరియు పొరలు

అంతే, ఇప్పుడు యానిమేషన్ కోసం లేయర్‌లకు వెళ్దాం.
మాకు బాణం లేయర్ మరియు హెడ్_క్యాట్ అవసరం.
బాణంతో ప్రారంభిద్దాం.
జాబితాను విస్తరించండి, కనుగొని గడియారంపై క్లిక్ చేయండి. కాబట్టి మేము మొదటి పాయింట్‌ను సున్నా సెకనులో ఉంచాము. మొత్తంగా, యానిమేషన్ 2 సెకన్ల పాటు ఉంటుంది.
కాబట్టి, ఇవి మీరు చేయవలసిన సెట్టింగ్‌లు (మేము మొత్తం 3 పాయింట్లను ఉంచుతాము)

రెండవ	0	1	2
	+66	- 70	+66

ఇది ఇలా కనిపిస్తుంది:

మూర్తి 10 - భ్రమణ బాణం

ఇప్పుడు పిల్లి తలను యానిమేట్ చేద్దాం.
హెడ్_క్యాట్‌ని విస్తరించండి మరియు కనుగొనండి స్థానం.
4 పాయింట్లు ఉంటాయి.
ఇది మిగిలిన వాటిని తాకకుండా చివరి కోఆర్డినేట్‌ను మాత్రమే మారుస్తుంది.

రెండవ	0.1	0.17	1.12	2.0
స్థానం	689.3	729.3	729.3	689.3

చిత్రాన్ని చూద్దాం.

మూర్తి 11 - స్థానం తల

కాబట్టి, యానిమేషన్ సూత్రం ఇలా ఉంది. బాణం పక్క నుండి ప్రక్కకు కదులుతుంది, అది పిల్లి దగ్గరికి వచ్చిన వెంటనే, అది తన తలను తనలోకి లాగుతుంది, ఈ స్థితిలో కొంచెం ఆలస్యమవుతుంది, ఆపై దానిని దాని స్థానానికి తిరిగి ఇస్తుంది.

చివరి దశ

ఉత్పత్తి
మీరు మీ పని నుండి పూర్తి ఉత్పత్తిని సృష్టించాలి.
మెనుకి వెళ్లండి - రెండర్ క్యూకి జోడించండి
రెండర్ ప్యానెల్ తెరుచుకుంటుంది మరియు అవుట్‌పుట్ మాడ్యూల్‌లో (రెండు క్లిక్‌లు) అవుట్‌పుట్ ఆకృతిని ఎంచుకోండి. నేను *.mov తీసుకున్నాను

మూర్తి 12 - రెండర్

RENDER బటన్‌పై క్లిక్ చేసి, ఫలితాన్ని పొందండి (మార్గాన్ని పేర్కొనడం మర్చిపోవద్దు).
అంతే.

ఇటీవల, వెబ్‌సైట్‌లు మరియు అప్లికేషన్‌లలో SVG (స్కేలబుల్ వెక్టర్ గ్రాఫిక్స్) గ్రాఫిక్స్ యొక్క వివిధ రకాల యానిమేషన్‌లు బాగా ప్రాచుర్యం పొందాయి. అన్ని తాజా బ్రౌజర్‌లు ఇప్పటికే ఈ ఫార్మాట్‌కు మద్దతు ఇవ్వడం దీనికి కారణం. SVG కోసం బ్రౌజర్ మద్దతు గురించి ఇక్కడ సమాచారం ఉంది.

ఈ వ్యాసం తేలికైన j క్వెరీ ప్లగ్ఇన్ లేజీ లైన్ పెయింటర్‌ని ఉపయోగించి SVG వెక్టార్‌ని యానిమేట్ చేయడానికి సరళమైన ఉదాహరణను వివరిస్తుంది.

మూలం

ఈ పనిని పూర్తి చేయడానికి మరియు పూర్తిగా అర్థం చేసుకోవడానికి, HTML, CSS, J క్వెరీకి సంబంధించిన ప్రాథమిక పరిజ్ఞానం అవసరం, కానీ మీరు SVGని యానిమేట్ చేయాలనుకుంటే అవసరం లేదు) ఇప్పుడు ప్రారంభించండి!

కాబట్టి మనం అనుసరించాల్సిన దశలు:

1. సరైన ఫైల్ నిర్మాణాన్ని సృష్టించండి
2. ప్లగిన్‌ని డౌన్‌లోడ్ చేసి కనెక్ట్ చేయండి
3. అడోబ్ ఇలస్ట్రేటర్‌లో కూల్ లైన్ ఆర్ట్ గీయండి
4. మా చిత్రాన్ని లేజీ లైన్ కన్వర్టర్‌గా మార్చండి
5. ఫలిత కోడ్‌ను main.jsలో అతికించండి
6. రుచికి కొన్ని CSSని జోడించండి

1. సరైన ఫైల్ నిర్మాణాన్ని సృష్టించండి
Initializr సేవ దీనితో మాకు సహాయం చేస్తుంది, ఇక్కడ మీరు దిగువ చిత్రంలో ఉన్నట్లుగా పారామితులను ఎంచుకోవాలి.

• క్లాసిక్ H5BP (HTML5 బాయిలర్ ప్లేట్)
• టెంప్లేట్ లేదు
• కేవలం HTML5 శివ
• కనిష్టీకరించబడింది
• .IE తరగతులు
• Chrome ఫ్రేమ్
• ఆపై డౌన్‌లోడ్ క్లిక్ చేయండి!

2. ప్లగిన్‌ని డౌన్‌లోడ్ చేసి, కనెక్ట్ చేయండి

లేజీ లైన్ పెయింటర్ ప్రాజెక్ట్ రిపోజిటరీ నుండి మనం డౌన్‌లోడ్ చేయాల్సిన ఆర్కైవ్ నుండి ఇనిషియలైజర్ సరికొత్త j క్వెరీ లైబ్రరీతో వస్తుంది కాబట్టి, మా ప్రాజెక్ట్‌కి కేవలం 2 ఫైల్‌లను మాత్రమే బదిలీ చేయాలి. మొదటిది 'jquery.lazylinepainter-1.1.min.js' (ప్లగ్ఇన్ వెర్షన్ భిన్నంగా ఉండవచ్చు) ఇది ఫలిత ఫోల్డర్ యొక్క రూట్‌లో ఉంది. రెండవది ఉదాహరణ/js/vendor/raphael-min.js.

ఈ 2 ఫైల్‌లు js ఫోల్డర్‌లో ఉంచబడ్డాయి. మరియు మేము వాటిని ఇలాంటి main.js కంటే ముందు మా index.htmlలో చేర్చుతాము:

3. అడోబ్ ఇలస్ట్రేటర్‌లో కూల్ అవుట్‌లైన్ చిత్రాన్ని గీయండి

1. ఇలస్ట్రేటర్‌లో మా అవుట్‌లైన్ చిత్రాన్ని గీయండి (దీనిని చేయడానికి పెన్ టూల్‌తో సులభమైన మార్గం)
2. మా డ్రాయింగ్ యొక్క ఆకృతులను మూసివేయకుండా ఉండటం అవసరం, ఎందుకంటే మా ప్రభావం కోసం మనకు ప్రారంభం మరియు ముగింపు అవసరం.
3. పూరకాలను కలిగి ఉండకూడదు
4. గరిష్ట ఫైల్ పరిమాణం 1000×1000 px, 40kb
5. ఆబ్జెక్ట్>ఆర్ట్‌బోర్డ్‌లు>ఆర్ట్‌బోర్డ్ సరిహద్దులకు సరిపోయే వస్తువు యొక్క సరిహద్దులకు కత్తిరించండి
6. SVGగా సేవ్ చేయండి (ప్రామాణిక సేవ్ సెట్టింగ్‌లు బాగానే ఉన్నాయి)

ఉదాహరణకు, మీరు అటాచ్‌మెంట్‌లోని చిహ్నాలను ఉపయోగించవచ్చు.

4. మన చిత్రాన్ని లేజీ లైన్ కన్వర్టర్‌గా మార్చండి
దిగువ పెట్టెలోకి మీ చిహ్నాన్ని లాగి వదలండి.
కన్వర్షన్ తర్వాత కనిపించే కోడ్‌లోనే అవుట్‌లైన్ యొక్క మందం, రంగు మరియు యానిమేషన్ వేగాన్ని మార్చవచ్చు!

5. ఫలిత కోడ్‌ను main.jsలో అతికించండి
ఇప్పుడు ఫలిత కోడ్‌ను ఖాళీ main.js ఫైల్‌లో అతికించండి
పారామితులు:
స్ట్రోక్‌విడ్త్ - అవుట్‌లైన్ మందం
స్ట్రోక్ కలర్ - అవుట్‌లైన్ రంగు
మీరు వ్యవధి పరామితి (డిఫాల్ట్ 600) విలువను మార్చడం ద్వారా ప్రతి వెక్టర్ యొక్క డ్రాయింగ్ వేగాన్ని కూడా మార్చవచ్చు.

6. రుచికి కొన్ని CSSని జోడించండి
index.html నుండి పేరాను తీసివేయండి

హలో వరల్డ్! ఇది HTML5 బాయిలర్‌ప్లేట్.

మరియు దానికి బదులుగా మన యానిమేషన్ జరిగే బ్లాక్‌ని ఇన్సర్ట్ చేస్తాము

తర్వాత మెయిన్.css ఫైల్‌కి కొంత CSSని జోడించి చక్కని రూపాన్ని పొందండి:

శరీరం (నేపథ్యం:#F3B71C; ) #చిహ్నాలు (స్థానం: స్థిరం; ఎగువ:50%; ఎడమ:50%; మార్జిన్: -300px 0 0 -400px; )

అన్ని ఫైళ్లను సేవ్ చేయండి.
ఇప్పుడు ఆధునిక బ్రౌజర్‌లో index.htmlని తెరిచి, ప్రభావాన్ని ఆస్వాదించండి.

పి.ఎస్. స్థానిక మెషీన్‌లో నడుస్తున్నప్పుడు, యానిమేషన్ ప్రారంభం కొన్ని సెకన్లు ఆలస్యం కావచ్చు.

హలో! ఈ రోజు నేను ప్రోగ్రామ్ యొక్క లక్షణాల వివరణను చేయడానికి ప్రయత్నిస్తాను అడోబ్ ఇలస్ట్రేటర్, ఫ్లష్ యొక్క సామర్థ్యాలతో పోల్చడం. ఇది ఎముక ప్రోగ్రామ్ యొక్క ప్రపంచ విశ్లేషణ కాదు, కానీ ఈ ప్రోగ్రామ్‌లో నేను కనుగొన్న కొన్ని ఆసక్తికరమైన చిప్‌ల వివరణ. అన్నింటినీ ఒకే పోస్ట్‌లో ఉంచడానికి నేను అధ్యయనం చేసినందున నేను సమాచారాన్ని ఒక్కొక్కటిగా సేకరించాను. నేను సూపర్-అనుభవం ఉన్న ఇలస్ట్రేటర్ వినియోగదారుని కాదని నేను వెంటనే అంగీకరించాలి, గత ఆరు నెలలుగా నేను దానిని డ్రాయింగ్‌లో ఉపయోగిస్తున్నాను (అంతకు ముందు, నేను ప్రతిదీ ఫ్లాష్‌లో గీసాను). చిత్రకారుడు సంక్లిష్టంగా ఉంటాడని, ఎల్లప్పుడూ సహజంగా ఉండదని చాలామంది ఫిర్యాదు చేస్తారు. కొంతవరకు, ఫ్లాష్ తర్వాత, ఈ ప్రోగ్రామ్ కష్టమని నేను అంగీకరిస్తున్నాను. కానీ ఇక్కడ ప్రధాన విషయం నిష్క్రమించడం కాదు, చదువు కొనసాగించడం. మరియు రెండు వారాల తర్వాత, ఆలోచన పుడుతుంది, నేను ముందు లేకుండా ఎలా నిర్వహించాను!

కాబట్టి, ఇలస్ట్రేటర్‌లో నాకు నచ్చినవి మరియు ఫ్లాష్‌లో లేని నా కోసం నేను కనుగొన్నవి.
1. నేను సరళమైన వాటితో ప్రారంభిస్తాను, కానీ అదే సమయంలో అవసరం. ఫ్లాష్‌లో వస్తువులను సర్కిల్‌లో అమర్చడానికి ప్రయత్నించండి. గతంలో ఉండేది డెకో టూల్, కానీ అది తీసివేయబడింది, స్పష్టంగా అనవసరంగా పరిగణించబడుతుంది. చేతితో చేస్తే మరింత సరదాగా ఉంటుందని నిర్ణయించుకున్నాం. చిత్రకారుడు ఈ లక్షణాన్ని కలిగి ఉన్నాడు: ప్రభావం - వక్రీకరించు & రూపాంతరం - రూపాంతరం.

ప్రతిదీ వేగంగా మరియు సరళంగా ఉంటుంది, మేము సెట్టింగులలో విలువలను (వస్తువుల మధ్య దూరం, కాపీల సంఖ్య) సెట్ చేస్తాము.

2. జిగ్జాగ్

మరింత సాధారణ, అయితే ఉపయోగకరమైన విషయం. ఇది చిన్న విషయంగా అనిపించవచ్చు, కానీ ఫ్లాష్‌లో మీరు చేతితో గీయాలి, ఇలస్ట్రేటర్‌లో ఇది సెకన్ల విషయం.

3. వస్తువుల రూపాంతరం (వార్ప్)

ఫ్లాష్‌లో ఇలాంటివేమీ లేవు. దిగువ ఉదాహరణలో, నేను సాధారణ ఆకృతులను (ఎఫెక్ట్ - వార్ప్ - ఆర్క్ / ఫిష్) వికృతీకరించడానికి 2 మార్గాలను మాత్రమే చూపించాను. వాస్తవానికి, ప్రోగ్రామ్ యొక్క తాజా వెర్షన్‌లో వాటిలో 15 ఉన్నాయి.

4. మూలల స్వయంచాలక రౌండింగ్ (రౌండ్ కార్నర్స్)

ఇది మానవీయంగా చేయవచ్చు: గ్రాఫికల్ వస్తువుపై, ఒక మూలలో (అన్ని మూలల్లో) ఎంచుకున్నప్పుడు, తెల్లటి చుక్క మరియు గుండ్రని పంక్తి గుర్తు కనిపిస్తుంది. మౌస్ లాగండి, మీ రుచికి సర్దుబాటు చేయండి.

కానీ ఇది ఆకారాలకు మాత్రమే వర్తిస్తుంది, పెన్సిల్ లైన్‌తో కొద్దిగా భిన్నంగా ఉంటుంది - రౌండింగ్ ప్రభావాన్ని వర్తింపజేయండి ( ప్రభావం - స్టైలైజ్ - రౌండ్ కార్నర్స్) అవుట్పుట్ వద్ద మేము అదే ఫలితాన్ని పొందుతాము.

5. రఫ్గెన్

ప్రభావం సాధారణ ఆకృతులకు వర్తించబడుతుంది ( ప్రభావం-వక్రీకరించు&రూపాంతరం-రఫ్జెన్) ఫలితంగా, మేము తక్కువ-పాలీ 3D మోడల్‌లను పోలి ఉండేదాన్ని పొందుతాము. ఇది బాగుంది అని నేను అనుకుంటున్నాను :) మరియు ముఖ్యంగా - చాలా సులభం.

6 పుకర్&బ్లోట్(లాగండి మరియు పెంచండి)
దిగువ చిత్రంలో ఒక ఉదాహరణ:

7. ఫారమ్ పొడిగింపు (ఆఫ్‌సెట్ పాత్)

ఫ్లాష్‌లో ఎక్స్‌పాండ్ ఫిల్ (ఫిల్ ఎక్స్‌టెన్షన్) ఫంక్షన్ ఉంది, ఇది ఇలస్ట్రేటర్‌లా కాకుండా పెన్సిల్ లైన్‌లతో అస్సలు పని చేయదు.

8. బ్రష్‌లు (ఆర్ట్ బ్రష్, ప్యాటర్న్ బ్రష్, స్కాటర్ బ్రష్)
ఉదాహరణల కోసం క్రింది చిత్రాన్ని చూడండి:

9. టెక్స్చర్ బ్రష్ (టెక్చర్ బ్రష్‌లు)

నేను వ్రాసిన ఇలస్ట్రేటర్‌లో అనేక ఆకృతి బ్రష్‌లు ఉన్నాయి మరియు అవి ఫ్లాష్ యొక్క కొత్త వెర్షన్‌లో ఎలా కనిపించాయి - . అడోబ్ యానిమేట్‌లో బ్రష్‌ల వాడకం చాలా నెమ్మదిగా ఉందని గమనించబడింది. అంతే:(

10. ఇది ఉపాయం కాదా అని నాకు ఖచ్చితంగా తెలియదు, కానీ నేను ఫన్నీ పేరుతో ఉన్న బ్రష్‌పై దృష్టి పెట్టాలనుకుంటున్నాను బొట్టుబ్రష్. టూల్‌బార్‌లో ఉంది, ఉపయోగించడానికి చాలా మంచి బ్రష్. ఇది సెట్టింగుల సమూహాన్ని కలిగి ఉంది, నేను సాధారణం కంటే ఎక్కువగా ఇష్టపడుతున్నాను. దాని ప్రయోజనాలను మాటల్లో వివరించడం కష్టం, ఒకసారి ప్రయత్నించడం మంచిది.

10.గ్రిడ్‌కు విభజించండి

మరొక ఉపయోగకరమైన ఫీచర్ స్ప్లిట్ టు గ్రిడ్ (ఆబ్జెక్ట్-పాత్-స్ప్లిట్ టు గ్రిడ్) ఫంక్షన్. ఇది ఫారమ్‌ను సమాన భాగాలుగా కత్తిరించడానికి మిమ్మల్ని అనుమతిస్తుంది. ఇది మనకు ఏమి గుర్తుచేస్తుంది? అది నిజం - ఎత్తైన భవనంలో కిటికీలు. నా విషయానికొస్తే, డ్రాయింగ్ కోసం ఒక మంచి విషయం, ఉదాహరణకు, పట్టణ ప్రకృతి దృశ్యాలు;)

ఇలస్ట్రేటర్‌లో మరొక ఉపయోగకరమైన సాధనం పరిచయం చేయబడింది, బహుశా దాని మొదటి విడుదల నుండి. దానితో, మీరు ఉదాహరణకు, చెక్క అల్లికలను సృష్టించవచ్చు:

12. తరలించు (కుడివైపు - రూపాంతరం - తరలించు)

ఇచ్చిన దూరం ద్వారా వస్తువును ఆఫ్‌సెట్ చేయండి. కావాలనుకుంటే, మీరు ఎంచుకున్న వస్తువు నుండి అడ్డంగా / లేదా నిలువుగా కావలసిన దూరం వద్ద ఉంచబడే కాపీని వెంటనే సృష్టించవచ్చు. ఫ్లాష్ యొక్క మునుపటి సంస్కరణలో, ఈ ఫంక్షన్‌ను ప్రదర్శించే ప్లగ్ఇన్ ఉంది. దురదృష్టవశాత్తు, దాని పేరు నాకు గుర్తులేదు.

ఇలస్ట్రేటర్‌లో అతుకులు లేని నమూనాలను సృష్టించడం చాలా సౌకర్యవంతంగా ఉంటుంది ( ఆబ్జెక్ట్-నమూనా-మేక్) యొక్క సృష్టితో నేను ఫ్లాష్‌లో ఎలా పిచ్చిగా రాణించానో నాకు గుర్తుంది. CC 2015 యొక్క ఇలస్ట్రేటర్ వెర్షన్‌లో, ప్రతిదీ స్వయంచాలకంగా ఉంటుంది, కొన్ని సెట్టింగులు మీకు డజన్ల కొద్దీ వైవిధ్యాలలో నమూనాను రూపొందించడంలో సహాయపడతాయి, కొన్ని గ్రాఫిక్ మూలకాలతో. ప్రోగ్రామ్ యొక్క మునుపటి సంస్కరణల్లో, ఇప్పటివరకు ఫ్లాష్‌లో ఉన్నట్లుగా ప్రతిదీ మాన్యువల్‌గా చేయాలి.

(గమనిక - పార్స్ ఫంక్షన్‌ని ఉపయోగించి నమూనాను వెక్టర్ సవరించగలిగే వస్తువుగా మార్చవచ్చు ( ఆబ్జెక్ట్-ఎక్స్‌పాండ్ స్వరూపం).

14. ఆబ్జెక్ట్ మొజాయిక్ (మొజాయిక్)

ఇప్పటికే ఉన్న చిత్రం ఆధారంగా రంగుల పాలెట్‌ను సృష్టించండి. మీకు నచ్చిన చిత్రాన్ని ఇలస్ట్రేషన్‌లోకి (ఓపెన్) దిగుమతి చేయండి ఆబ్జెక్ట్ - ఆబ్జెక్ట్ మొజాయిక్ సృష్టించండి. సెట్టింగులలో, మేము ఎత్తు మరియు వెడల్పులో విభజన ఫ్రీక్వెన్సీని నిర్దేశిస్తాము.

మరియు అవుట్‌పుట్ వద్ద మనకు లభిస్తుంది:

15.బ్లెండ్ (మిక్సింగ్)

ప్రవణతలను సృష్టించడానికి ఉపయోగిస్తారు. మీరు దశల వారీ పరివర్తనలను సృష్టించవచ్చు, ఉదాహరణకు, చిత్రంలో. నేను దీన్ని తరచుగా ఉపయోగిస్తానని చెప్పలేను, కానీ అది ఎవరికైనా ఉపయోగపడవచ్చు. సాధారణ నేపథ్య చిత్రాలను రూపొందించడంలో దీనిని ఉపయోగించవచ్చని నాకు అనిపిస్తోంది.

వస్తువులను క్లోన్ చేయడానికి కూడా ఈ సాధనాన్ని ఉపయోగించవచ్చు. మేము రెండు వస్తువులను ఒకదానికొకటి దూరంలో ఉంచుతాము మరియు బ్లెండ్ ఎంపికలను వర్తింపజేస్తాము, దశల సంఖ్యను ఎంచుకోండి (క్లోన్ చేయబడిన వస్తువుల సంఖ్య).

16. బిల్డ్ షేప్ టూల్.ఆదిమలతో పని చేయడానికి చాలా సులభ విషయం. ఒక ఫ్లాష్‌లో, నాకు అనిపించినట్లుగా, ఇది తక్కువ సౌకర్యవంతంగా ఉంటుంది.

Altని పట్టుకుని, ఎంచుకున్న సెగ్మెంట్లపై క్లిక్ చేయండి - సెగ్మెంట్లను తొలగించండి. మేము ఎంచుకున్న అనేక ప్రాంతాలపై మౌస్‌ని లాగితే - కనెక్షన్లు.

అదనంగా - స్వయంచాలకంగా కత్తిరించడం, కనెక్ట్ చేయడం మొదలైనవాటికి సహాయపడే సాధనం. ఎంచుకున్న ఫారమ్‌లు. నా విషయానికొస్తే, ఇది చాలా సౌకర్యవంతంగా లేదు, నేను దీన్ని ఎక్కువగా ఉపయోగిస్తాను నిర్మించుఆకారంసాధనం.

(ఆర్ట్‌బోర్డ్‌లు)

18.కస్టమ్ టూల్ ప్యానెల్

మీ స్వంత టూల్‌బార్‌ని సృష్టించగల సామర్థ్యం, ​​అనవసరమైన వాటిని విస్మరించడం మరియు మీరు ఉపయోగించే వాటిని మాత్రమే ఎంచుకోవడం.

ఫ్లాష్‌లో, ఆర్ట్‌బోర్డ్‌లు, అవి దృశ్యాలు ( సీన్ 1,2,3..) విడివిడిగా ఉన్నాయి మరియు మీరు వాటి మధ్య మారాలి (Shift + F2). ఇలస్ట్రేటర్‌లో, అవన్నీ మీ కళ్ళ ముందు ఉంచబడతాయి. మీరు ఒకే డ్రాయింగ్ యొక్క అనేక సంస్కరణలను రూపొందించినప్పుడు ఇది సౌకర్యవంతంగా ఉంటుంది, తద్వారా అన్ని ఎంపికలు మీ కళ్ళ ముందు పోలిక కోసం ఉంటాయి.

19. గ్రాఫిక్ స్టైల్స్‌తో ఐసోమెట్రిక్

మరియు చివరి విషయం ఏమిటంటే, గ్రాఫిక్ స్టైల్స్ ఉపయోగించి 1 క్లిక్ (లేదా బదులుగా, 3 క్లిక్‌లు, ఎందుకంటే మనకు 3 వైపులా ఉన్నాయి;) ఉపయోగించకుండా ఐసోమెట్రీని సృష్టించడం ( గ్రాఫిక్ స్టైల్స్) ఇది ఎలా జరుగుతుంది, నేను తదుపరిసారి వ్రాస్తాను.

ఫ్లాష్‌తో ఇలస్ట్రేటర్‌కు ఉమ్మడిగా ఉండే అంశం ఏమిటంటే, ఒక వస్తువును గుర్తుకు (చిహ్నం) సేవ్ చేయగల సామర్థ్యం మరియు ఈ చిహ్నాన్ని కూడా సమస్యలు లేకుండా ఫ్లాష్‌కి బదిలీ చేయవచ్చు (ఫ్లాష్‌లో .AI ఫైల్‌ను తెరవండి, ద్వారా దిగుమతి - దశకు దిగుమతి).
ఇలస్ట్రేటర్‌లోని చిహ్నం ఫ్లాష్‌లో ఉన్న అదే లక్షణాలను కలిగి ఉంటుంది.
మరియు చివరికి, ఇలస్ట్రేటర్‌లో, నా అభిప్రాయం ప్రకారం, ఫ్లాష్ కంటే తక్కువ అని నేను వ్రాస్తాను. అవును, అవును, మరియు ఉంది. మరియు ఇది పూరక సాధనం ( రంగుల బకెట్) ఇల్లాలో అలవాటు పడాలని ఎంత ప్రయత్నించినా ఫ్లాష్‌లో మరింత సౌకర్యవంతంగా ఉంటుంది.
నా గమనికలు మీకు ఉపయోగకరంగా ఉంటే లేదా మీరు మీ స్వంతంగా ఏదైనా జోడించాలనుకుంటే - వ్యాఖ్యలలో స్వాగతం! అందరికీ శుభాకాంక్షలు;)