గూగుల్ నుండి మెటీరియల్ డిజైన్ స్పెసిఫికేషన్ మొదట Android ప్లాట్ఫారమ్ ప్లాట్ఫాం రూపకల్పనకు అనుగుణంగా సూచించడానికి మార్గంగా ఉంది.
06 నుండి 01
ఎలా Adobe Experience CC లో ఒక మెటీరియల్ డిజైన్ కార్డ్ సృష్టించండి
డిజైనర్లు దీని ద్వారా నడవడం ప్రారంభించారు మరియు దాని వెనుక ఆలోచనను అర్ధం చేసుకోవడం ప్రారంభించారు, మెటీరియల్ డిజైన్ నిశ్శబ్దంగా వెబ్ మరియు మొబైల్ డిజైన్ లో అత్యంత ప్రభావవంతమైన దృశ్య తత్వాలు ఒకటి మారింది. మీరు మనం ఏమి చేస్తున్నారో చూడడానికి మీరు చేయవలసిందల్లా Pinterest లో ఒక మెటీరియల్ డిజైన్ శోధన చేయవలసి ఉంది మరియు మీరు పరికరాలు, టాబ్లెట్లు మరియు వెబ్ సైట్లలో వందలాది ఉదాహరణలు మరియు ప్రయోగాలను చూస్తారు.
మెటీరియల్ డిజైన్ యొక్క ఉత్తేజకరమైన అంశం ఏమిటంటే మొబైల్ పరికరాల్లో ఎలాంటి అనువర్తనాలు కనిపిస్తాయి మరియు పని చేస్తాయనే దానిపై గూగుల్ ఆలోచించినప్పటికీ, ఏ ప్లాట్ఫారమ్లో ఏదైనా పరిమాణంలోనైనా స్క్రీన్కు అన్వయించడం జరుగుతుంది. గూగుల్ స్పెసిఫికేషన్ యొక్క పేరాగ్రాఫ్లో పేర్కొన్న విధంగా, "మంచి రూపకల్పన యొక్క క్లాసిక్ సూత్రాలను సాంకేతిక మరియు సైన్స్ యొక్క ఆవిష్కరణతో మరియు సంభావ్యతతో సమీకృతం చేసే మా వినియోగదారులకు దృశ్య భాషని సృష్టించడానికి మేము సవాలు చేసాము. ఇది భౌతిక రూపకల్పన. ఈ స్పెసిఫికల్ జీవన పత్రం మరియు మానిటర్ డిజైన్ ప్రత్యేకతలు అభివృద్ధి మేము కొనసాగుతుంది అప్డేట్ అవుతుంది. "
విషయం గురించి చాలా సాధారణ పరంగా మాట్లాడారు, కాగితం మరియు మెటీరియల్ డిజైన్ యొక్క ముఖ్య లక్షణం కార్డు. ఉపరితలంపై సూచిక కార్డు గురించి ఆలోచించండి మరియు మీరు సరైన మార్గంలో ఉన్నారు. ఒక కార్డు ఫోటోలు, వీడియోలు, టెక్స్ట్ లింక్ లను కలిగివున్న ఎలిమెంట్, కానీ చాలా ఇంటరాక్టివ్ డిజైన్స్ నుండి వేరుగా ఉన్న వారు ఒకే అంశంపై దృష్టి పెట్టడం. కార్డులు మూలల గుండ్రంగా ఉన్నాయి, అవి ఒక ఉపరితలం పై ఉన్నట్లుగా పేర్కొనబడిన మృదువైన నీడలను కలిగి ఉంటాయి మరియు అవి ఒకే విమానంలో ఉంటే అవి "సేకరణ" గా సూచిస్తారు.
ఈ లో "ఎలా" మేము స్పెక్ ఆధారంగా ఒక కార్డు సృష్టించడానికి వెళ్తున్నారు. వివిధ రకాల ఇమేజింగ్ మరియు డ్రాయింగ్ టూల్స్తో కార్డును సృష్టించే బదులు, మేము వేరొక దిశ నుండి రాబోతున్నాం. మేము ప్రస్తుతం Macintosh మాత్రమే పబ్లిక్ పరిదృశ్యం లో ఉన్న Adobe యొక్క ఎక్స్పీరియన్స్ డిజైన్లో టూల్స్ ఉపయోగించబోతున్నాము మరియు ఉచితం. మీరు ఇక్కడ డౌన్లోడ్ చేసుకోవచ్చు.
ప్రారంభించండి.
02 యొక్క 06
అడోబ్ ఎక్స్పీరియన్స్ డిజైన్ CC లో ప్రోటోటైప్ ఆర్ట్ బోర్డు సృష్టిస్తోంది
అనుభవ డిజైన్ డిజైన్ CC (XD) లో ప్రారంభ స్క్రీన్ నుండి ఒక Android తెరను సృష్టించడానికి స్పష్టమైన మార్గం లేదు. మేము XD తెరిచినప్పుడు ఏమి చేయాలో ఉపయోగించాము, ఐఫోన్ 6 ఎంపికను ఎంపిక చేసుకోవడం మరియు ఇంటర్ఫేస్ తెరిచినప్పుడు, టూల్ బార్ యొక్క దిగువన ఉన్న ఆర్ట్ బోర్డు సాధనాన్ని ఎంచుకోండి మరియు ఆప్షన్స్ ప్యానెల్లో ఎంపికల నుండి ఆండ్రాయిడ్ మొబైల్ను ఎంచుకోండి . అప్పుడు మేము ఎంపిక సాధనంకు మారి, ఐఫోన్ ఆర్ట్ బోర్డ్ యొక్క పేరుపై ఒకసారి క్లిక్ చేసి, ఆర్ట్ బోర్డు తొలగించండి. లేదు.
XD యొక్క ప్రస్తుత సంస్కరణలో, ఐఫోన్ 6 పక్కన ఒక చిన్న బాణం ఉంది, ఇది క్లిక్ చేసినప్పుడు, డ్రాప్-డౌన్ మెనుని తెరుస్తుంది. అక్కడ నుండి మీరు Android మొబైల్ సంస్కరణను ఎంచుకుంటారు మరియు ఎంపిక చేసిన Android మొబైల్ ఆర్ట్బోర్డ్ ఇంటర్ఫేస్లో తెరుస్తుంది.
కార్డు కోసం సరైన స్క్రీన్ స్థలం తెరిచినట్లు నిర్ధారించడానికి, మేము సాధారణంగా స్కెచ్ 3 కు తలపడతారు మరియు మెటీరియల్ డిజైన్ మూస నుండి స్టేటస్ బార్, నవ్ బార్ మరియు అనువర్తన బార్ను కాపీ చేసి అతికించండి. స్కెచ్ 3.2 లో ఒక మెటీరియల్ డిజైన్ టెంప్లేట్ ( మూస> న్యూట్రిషన్ డిజైన్ నుండి కొత్తదిగా ఉంటుంది) మరియు ఇంకొక మంచి ఉచిత ఒకటి కైల్ లెడ్బెటర్ నుండి మీరు ఇక్కడ పొందవచ్చు. మీకు స్కెచ్ లేకపోతే, ఫైల్> ఓపెన్ UI కిట్> గూగుల్ మెటీరియల్లో కనిపించే XD స్టిక్కర్ల నుండి వారిని కాపీ చేసి అతికించవచ్చు. Photoshop, Illustrator, ప్రభావాలు మరియు స్కెచ్ తరువాత ఉపయోగించడం కోసం మీరు Google నుండి వాటిని డౌన్లోడ్ చేసుకోవచ్చు.
03 నుండి 06
అడోబ్ XD CC ఆర్ట్ బోర్డుకు మెటీరియల్ డిజైన్ కార్డు కలుపుతోంది
XD యొక్క అత్యంత ఉపయోగకరమైన లక్షణాలలో ఒకటి UI కిట్స్ ఆపిల్ iOS, గూగుల్ మెటీరియల్ మరియు మైక్రోసాఫ్ట్ విండోస్ కోసం చేర్చడం. అనేక రకాలుగా, వారు "రాపిడ్" అనే పదాన్ని "రాపిడ్ ప్రొటోటైపింగ్" అనే పదానికి చేర్చారు.అలాగే వారు సాధారణ UI మూలకాలలో డిజైనర్ యొక్క ఉద్యోగం సులభంగా ఫోటోషాప్, చిత్రకారుడు లేదా నమూనా రూపకల్పనలో నిరంతరం పునఃనిర్మించాల్సిన అవసరం లేదు స్కెచ్.
మేము అవసరమయ్యే UI మూలకం కార్డు. దానికి సంబంధించి మేము ఫైల్> ఓపెన్ UI కిట్> గూగుల్ మెటీరియల్ మరియు కిట్ ఒక కొత్త పత్రంగా తెరవబడింది. మేము అవసరమైన మూలకం కార్డ్స్ విభాగంలో కనుగొనబడింది.
ఈ విషయాల గురించి మేము ఏమి ప్రేమిస్తారంటే అవి కంటెంట్ బ్లాక్స్ స్పెక్స్లో అలాగే టైపోగ్రఫీ స్పెక్స్లో రూపొందించిన టెక్స్ట్ ఫార్మాటింగ్ మరియు అంతరంగ స్పెక్స్లో మెటీరియల్ డిజైన్ స్పెసిఫికేషన్కు కట్టుబడి ఉంటాయి.
మనం కోరుకున్న కార్డు స్టైల్ దిగువన ఎడమవైపున ఉంది. మేము దానిని మా మౌస్తో మార్క్ చేసి క్లిప్బోర్డ్కు కాపీ చేసాము. దురదృష్టవశాత్తు, XD ఓపెన్ డాక్యుమెంట్లకు టాబ్డ్ ఇంటర్ఫేస్ను కలిగి లేదు. మనం ఏమి చేస్తున్నామో బహిరంగ డాక్యుమెంట్ విండోను బిట్ డౌన్ చేద్దాం. ఓపెన్ XD డాక్యుమెంట్ల మధ్య మారడం మరొక మార్గం కమాండ్- 'నొక్కడం .
04 లో 06
Adobe Experience Design CC లో మెటీరియల్ డిజైన్ ఎలిమెంట్ ను ఎలా సవరించాలి
XD లో కార్డు క్లిప్బోర్డ్ నుండి వచ్చినప్పుడు అది పని చేయడం సరిగ్గా లేదు. మీరు చేయవలసినది మొదటి విషయం కార్డును సమూహపరచటానికి ఉంది ఎందుకంటే బిట్ మరియు కార్డును కంపోజ్ చేసే ముక్కలు మీకు ప్రాప్తి అవసరం. ఇది చేయుటకు, కార్డును ఎన్నుకొని ఆబ్జెక్టు> Ungroup లేదా Shift-Command-G నొక్కుము .
మీ కార్డు ఇప్పుడు మూడు ముక్కలు కలిగి ఉంది:
- చిత్రం కోసం లేత బూడిద రంగు బాక్స్.
- టెక్స్ట్ కోసం మీడియం గ్రే బాక్స్
- బ్యాక్ బాక్సు ఉపయోగించిన నేపథ్యంలో.
మొదటి అడుగు కాంతి బూడిద బాక్స్ తొలగించడం. మీరు ఎంచుకున్నట్లయితే, దాన్ని ఎంచుకున్నట్లయితే, ఇమేజ్ కోసం ఒక ప్లేస్హోల్డర్గా వ్యవహరించాలి.
టెక్స్ట్ తో బాక్స్ నిజానికి ఒక చీకటి బూడిద ఉంది 50% అస్పష్టత. ఈ పెట్టె టెక్స్ట్ నేపథ్యంగా ఉపయోగించవచ్చు మరియు మీరు రంగు మరియు బాక్స్ యొక్క అస్పష్టతను మార్చవచ్చు.
ఇది వెంటనే స్పష్టంగా తెలియకపోయినప్పటికీ, లేత బూడిద రంగు పెట్టె మెటీరియల్ డిజైన్స్ స్పెక్స్ను అనుసరిస్తుంది, దాని అగ్ర మూలలు 2 పిక్సల్స్తో గుండ్రంగా ఉంటాయి. మీరు ఒక చిత్రాన్ని జోడించి ఉంటే అది గుర్తుంచుకోండి. ఇది ఒక ఇమేజింగ్ అప్లికేషన్ లేదా XD లో చేర్చవచ్చు ఇది గుండ్రని మూలలు అవసరం.
ఇది కార్డు యొక్క విశ్రాంతి స్థితిలో ఎలా ఉంటుందో చూడటం కూడా నీడ అవసరం. స్పెసిఫికల్ 2 పిక్సెల్ల యొక్క కార్డు విశ్రాంతిగా ఉంది. దీనిని జోడించడానికి , బ్లాక్ బ్యాక్గ్రౌండ్ ఆకారాన్ని ఎన్నుకోండి మరియు Y మరియు B (బ్లర్) విలువలను 2 కు సెట్ చేయండి.
05 యొక్క 06
Adobe XD CC లో మెటీరియల్ డిజైన్ కార్డుకు ఒక చిత్రాన్ని ఎలా జోడించాలి
కార్డు తెలుసుకున్నది 344 పిక్సల్స్ వెడల్పు మరియు చిత్రం ప్రాంతం 150 పిక్సెల్స్ అధిక ( కాంతి బూడిద బాక్స్ సగం ఎత్తు ) మేము Photoshop లో చిత్రం తెరిచారు, పరిమాణం దానిని కత్తిరించిన మరియు Photoshop యొక్క ఎగుమతి లో @ 2x ఎంపికను ఉపయోగించి సేవ్ డైలాగ్ గా బాక్స్. చిత్రం Adobe XD లోకి దిగుమతి అయ్యింది.
అప్పుడు మేము పేస్ట్బోర్డుపై ఉన్న చిత్రంపై కాంతి బూడిద బాక్స్ని లాగి, ఆబ్జెక్ట్> మాస్క్ ఆకారంతో ఎంచుకున్నాము. ఫలితంగా ఆకారం యొక్క గుండ్రని మూలల తయారయ్యారు చిత్రం. మేము ఆ చిత్రాన్ని దాని చివరి స్థానానికి తరలించాము.
స్థానంలో చిత్రం తో, మేము అప్పుడు మీడియం బూడిద బాక్స్ యొక్క నేపథ్య రంగు మార్చారు, టెక్స్ట్ మరియు టెక్స్ట్ టెక్స్ట్ యొక్క రంగు మార్చబడింది.
06 నుండి 06
Adobe XD CC గ్రిడ్ లక్షణాన్ని ఉపయోగించడం
కార్డు పూర్తయిన తరువాత ఇప్పుడు మెటీరియల్ డిజైన్ స్పెక్ ప్రకారం సరిగా అమర్చాలి. దీని అర్థం కార్డు యొక్క ఇరువైపులా 8 పిక్సెల్స్ మరియు కార్డు అనువర్తనం బార్ క్రింద 8 పిక్సెల్స్ ఉండాలి. ఇది చేయుటకు, చిత్రపటాల జాబితాలో ఒకసారి క్లిక్ చేయండి మరియు, గుణాలు ప్యానెల్లో, గ్రిడ్ ఎంచుకోండి. గ్రిడ్ ఆర్ట్ బోర్డు మీద కనిపిస్తుంది.
డిఫాల్ట్ గ్రిడ్ సైజు 8 పిక్సెల్స్, ఇది మెటీరియల్ డిజైన్ కోసం ఒకే గ్రిడ్ పరిమాణంగా ఉంటుంది. మీకు వేరొక పరిమాణం అవసరమైతే గ్రిడ్ ప్రాంతంలో విలువను మార్చండి. మీరు గ్రిడ్ యొక్క రంగును మార్చాలనుకుంటే, రంగు చిప్ని క్లిక్ చేసి, రంగు పిక్కర్ నుండి రంగును ఎంచుకోండి.
గ్రిడ్ కనిపించేటప్పుడు, కార్డుపై క్లిక్ చేసి దాని చివరి స్థానానికి తరలించండి.
పూర్తి చేయడానికి, మేము కార్డును ఎంచుకున్నాము, రిపీట్ గ్రిడ్ బటన్ను క్లిక్ చేసి కార్డుల మధ్య అంతరం 8 పిక్సెల్స్కు మార్చింది.