Bha an sònrachadh Material Material Design bho Google an toiseach ag amas air àrd-ùrlar Android mar dhòigh air co-chòrdachd dealbhaidh air an àrd-ùrlar a mholadh.
01 de 06
Mar a chruthaicheas tu cairt dealbhaidh stuthan ann an Adobe Experience Design CC
Aon uair 's gu bheil luchd-dealbhaidh a' tòiseachadh troimhe agus a 'tuigsinn na smuaintean air a chùlaibh, tha Material Design air a thighinn gu sàmhach mar aon de na feallsanachdan lèirsinne as buailtiche ann an dealbhadh lìn is gluasadach . A h-uile càil a dh'fheumas tu a dhèanamh gus faighinn a-mach dè a tha sinn a 'faighinn aig an àm gus rannsachadh Material Design a dhèanamh air Pinterest agus chì thu na ceudan de eisimpleirean agus deuchainnean air innealan, clàran, agus eadhon làraich-lìn.
Is e an taobh iongantach de Dhealbhadh Stuth a th 'ann gu bheil Google a' smaoineachadh air mar a bu chòir aplacaidean a bhith a 'nochdadh agus ag obair air innealan gluasadach ach tha na bun-bheachdan gan cur an sàs ann an sgrion sam bith de mheud sam bith air àrd-ùrlar sam bith. Mar a tha Google ag ràdh ann am paragraf fosglaidh an t-sònrachaidh, "thug sinn dùbhlan dhuinn fhèin gus cànan lèirsinneach a chruthachadh dha ar luchd-cleachdaidh a tha a 'co-chòrdadh ri prionnsabalan clasaigeach deagh dhealbh le innleachdas agus comas teicneòlas agus saidheans. Is e dealbhadh stuth a tha seo. Is e sgrìobhainn bheò a th 'anns an spec seo a thèid ùrachadh fhad' sa tha sinn a 'cumail oirnn a' leasachadh nan gabhaidean agus na h-àiteachan sònraichte de dhealbhadh stuthan. "
Tha an stuth air a bhith a 'bruidhinn, ann an teirmean gu math coitcheann, mar phàipear agus mar chomharra air Material Design is ea' chairt. Smaoinich air cairt clàr-amhairc air uachdar agus tha thu air an rathad cheart. Tha cairt na eileamaid le dealbhan, bhideothan, ceanglaichean teacsa agus mar sin air adhart, ach far a bheil iad diofraichte bhon chuid as motha de dhealbhaidhean eadar-ghnìomhach, tha iad an dùil a bhith ag amas air aon chuspair. Tha oiseanan cruinn air na cairtean, tha sgàilean fallain a 'sealltainn gu bheil iad os cionn uachdar agus ma tha iad uile air an aon phlèana tha iad air an ainmeachadh mar "cruinneachadh".
Anns an "How To" seo, bidh sinn a 'dol a chruthachadh cairt stèidhichte air a' chomharra. An àite a bhith a 'cruthachadh a' chairt le diofar ìomhaighean agus innealan tarraing, bidh sinn a 'tighinn thuige bho stiùireadh eadar-dhealaichte. Bidh sinn a 'cleachdadh nan innealan ann an Adobe's Experience Design a tha an-dràsta ann an ro-shealladh poblach Macintosh-a-mhàin a-mhàin agus tha e an-asgaidh. Faodaidh tu a luchdachadh sìos an-seo.
Leigamaid tòiseachadh.
02 de 06
A 'cruthachadh an prototype artboard ann an Adobe Experience Design CC
Chan eil dòigh sam bith ann airson sgrìon Android a chruthachadh bhon Start Screen ann an Design Design CC (XD). Na bu chòir dhuinn a dhèanamh nuair a dh'fhosgail sinn XD, is e an roghainn iPhone 6 a thaghadh agus nuair a bhios an eadar-aghaidh a 'fosgladh, bidh sinn a' taghadh inneal Artboard aig bonn a 'Chrann Inneal agus tagh Android Mobile bho na taghaidhean air a' phannal Properties air dheas. An uairsin bidh sinn a 'gluasad air adhart chun an inneal taghaidh, cliog uair air ainm artboard iPhone agus sguab às an artboard. Gun an còrr.
Anns an tionndadh làithreach de XD, tha saighead beag ri taobh iPhone 6 a tha, nuair a thèid a chliogadh, a 'fosgladh clàr-taice. Às sin thaghas tu an tionndadh Android Mobile agus tha an artfòn Android Mobile air a thaghadh san eadar-aghaidh.
Gus dèanamh cinnteach gu bheil an raon sgrion ceart againn airson a 'chairt, mar as trice bidh sinn a' dol a-mach gu Sgeidse 3 agus cuiridh sinn Barra Stàite, Barra na h-Uamha, agus a 'bhàr-aplacaid bho Template Template a-steach dhan artboard. Tha Sgeidse 3.2 a 'toirt a-steach teamplaid Stuth dealbhaidh ( File> New From Template> Material Design ) agus tha fear eile fìor mhath an-asgaidh bho Kyle Ledbetter a gheibhear an seo. Mura h-eil Sgeidse agad, faodaidh tu lethbhreacan a dhèanamh dhiubh agus na stiogairean XD a gheibhear ann am File> Open UI Kit> Stuth Ghoogle . Faodaidh tu cuideachd iad a luchdachadh sìos bho Google airson a chleachdadh ann an Photoshop, Illustrator, After Effects and Sketch.
03 de 06
A 'cur Cairt Dealbhaidh Stuth a-steach gu bòrd Adobe XD CC
Is e aon de na feartan as fheumaile ann an XD a bhith a 'toirt a-steach Kut UI airson Apple iOS, Stuth Ghoogle, agus Microsoft Windows. Ann am mòran dhòighean, tha iad a 'cur ris an fhacal "Rapid" ris an fhacal "Brotadh sìmplidh". A bharrachd air sin, tha iad a' dèanamh obair an neach-dealbhaidh nas fhasa anns na h-eileamaidean UI cumanta sin a bhith air an ath-chruthachadh an-còmhnaidh ann an Iarrtas Dealbhaidh leithid Photoshop, Illustrator no Sgeidse.
B 'e cairt an eileamaid UI a bha a dhìth oirnn. Gus faighinn thuige, thagh sinn File> Open UI Kit> Stuth Ghoogle agus dh'fhosgail an inneal mar sgrìobhainn ùr. Chaidh an eileamaid a dh 'fheum sinn a lorg ann an roinn nan Cairtean.
Na tha sinn ag iarraidh mu dheidhinn seo tha iad a 'cumail ris an t-sònrachadh Material Design mar a tha air a mhìneachadh anns na sònrachaidhean Susbaint Susbaint a thuilleadh air na specs cruth teacsa agus eadar-dhealachaidh teacsa a chaidh a mhìneachadh anns an t-seòrsa Typography.
B 'e an stoidhle cairtean a bha sinn ag iarraidh an tè aig a' bhonn gu clì. Bidh sinn dìreach air a mharbhadh leis an luchag agus rinn sinn lethbhreac dheth dhan chlàr-bhùird. Gu mì-fhortanach, chan eil eadar-aghaidh tabbed ann an XD airson sgrìobhainnean fosgailte. Is e na tha sinn a 'dèanamh a' gluasad uinneag na sgrìobhainn fosgailte sìos beagan gus an neach a tha sinn ag obair a nochdadh, a thaghadh agus a ghleidheadh. Is e dòigh eile air a bhith a 'sìor atharrachadh eadar sgrìobhainnean fosgailte XD brùth Command -' .
04 de 06
Mar a nì thu Earrann Dealbhaidh Stuth airson Deasachadh CC ann an Adobe Experience
Nuair a thig an cairt ann an XD bhon chlàr-chlàir chan eil e gu tur a 'tòiseachadh ag obair còmhla ris. Is e a 'chiad rud a dh'fheumas tu a dhèanamh a' chairt a ghluasad oir tha feum agad air ruigsinn air a 'phàirt agus na pìosan a tha a' dèanamh a 'chairt. Gus seo a dhèanamh, tagh an cairt agus tagh Object> Ungroup no brùth air Shift-Command-G.
Tha do chairt a-nis air a dhèanamh suas de thrì pìosan:
- Bogsa aotrom liath airson an ìomhaigh.
- Bogsa glas meadhanach airson an teacsa
- Bha am bogsa cùil air a chleachdadh mar chùl-raon.
Is e a 'chiad cheum am bogsa aotrom glas a sguabadh às. Is e an aon adhbhar a th 'ann a bhith na neach-àite airson an ìomhaigh a tha ga dhèanamh, ma thaghas tu, roghainn.
Tha am bogsa leis an teacsa ann an dorcha liath le dùmhlachd 50%. Faodar am bogsa seo a chleachdadh mar chùl-fhiosrachadh an teacsa agus faodaidh tu an dath agus dìomhaireachd a 'bhocsa atharrachadh.
Ged nach eil e follaiseach sa bhad, tha am bogsa aotrom glas a 'leantainn a' chomharra Stuth dealbhaidh anns a bheil 2 oisean air a chrìochnachadh. Cumaibh seo san amharc ma tha thu a 'cur ri dealbh. Bidh feum air oiseanan cruinn cuideachd a dh'fhaodar a chur ri tagradh ìomhaighean no ann an XD.
A 'faicinn mar a tha seo ann an staid fois a' chairt tha feum aige air sgàilean cuideachd. Tha an sònrachadh ga dhèanamh soilleir gu bheil àrdachadh fois air a 'chairt de 2 piogsail. Gus seo a chur ris, tagh cumadh an cùl-dhubh agus cuiridh tu luachan Y agus B (Blur) gu 2 anns a 'phannal seilbh.
05 de 06
Mar a chuireas tu dealbh ris a 'chairt ann an Adobe XD CC
Tha fios aig a 'chairt air 344 piogsail de leud agus tha an raon deilbh 150 piogsaidh a dh' àirde ( leth àirde an bogsa aotrom liath ) Dh'fhosgail sinn an dealbh ann am Photoshop, ga bhualadh gu meud agus shàbhail sinn e leis an roghainn @ 2x ann an deasbaireachd Photoshop's Export As bogsa. Chaidh an ìomhaigh a thoirt a-steach gu Adobe XD.
An uairsin tharraing sinn bogsa aotrom glas thairis air an ìomhaigh air a 'bhòrd-paste agus tagh Rud> masg le cruth . B 'e an toradh an dealbh a' togail oiseanan cruinn den chumadh. An uairsin ghluais sinn an ìomhaigh chun a shuidheachadh mu dheireadh.
Leis an ìomhaigh na àite, dh 'atharraich sinn an dath cùl-raoin den bhogsa Meadhan Meadhanach, dh'atharraich sinn an teacsa agus dath an teacsa ceangailte.
06 de 06
A 'cleachdadh Adobe XD CC Grid Feature
Leis a 'chairt a lìonadh a-steach feumaidh e a-nis a bhith air a shuidheachadh mar bu chòir a rèir spec spec material. Tha seo a 'ciallachadh gu bheil 8 piogsail air gach taobh den chairt agus feumaidh an cairt a bhith 8 piogsail fon bhàr-aplacaid. Gus seo a dhèanamh, briog air aon uair air an ainm artboard agus, anns a 'Phannal Tìrean, tagh Grid. Tha a 'ghriod a' nochdadh thairis air a 'chlàr-ealain.
Is e meud bunaiteach a 'ghriod 8 piogsail a tha mar an aon mheud grid airson Dealbhadh Deunydd. Ma bhios feum agad air meud eadar-dhealaichte, atharraich an luach anns an sgìre Ghrìid. Ma tha thu airson dath a 'ghriod atharrachadh, briog air an sgiob dath agus tagh dath bhon Picker Color.
Leis a 'ghriod ri fhaicinn, cliog air a' chairt agus gluais e san àite mu dheireadh aice.
Gus crìochnachadh suas, thagh sinn an cairt, cliog sinn air a 'phutan Ath-ghriod agus dh'atharraich sinn an eadar-dhealachadh eadar na cairtean gu 8 pixel.