ગૂગલ (Google) ના મટીરીઅલ ડિઝાઇન સ્પેસિફિકેશન મૂળ રૂપે પ્લેટફોર્મ પર ડિઝાઈનની સુસંગતતાને સૂચવવા માટે એક માર્ગ તરીકે એન્ડ્રોઇડ પ્લેટફોર્મ પર રાખવાનો હતો.
06 ના 01
એડોબ અનુભવ ડિઝાઇન સીસીમાં મટીરીઅલ ડિઝાઇન કાર્ડ કેવી રીતે બનાવવું
એકવાર ડિઝાઇનર્સ તે મારફતે પોક્સ કરવાનું શરૂ કરી દીધું અને તેની પાછળના વિચારને સમજવા માટે, મટીરીઅલ ડિઝાઇને શાંતિથી વેબ અને મોબાઇલ ડિઝાઇનમાં સૌથી પ્રભાવશાળી વિઝ્યુઅલ ફિલોસોફી પૈકી એક બની ગયું છે. Pinterest પર કોઈ સામગ્રી ડીઝાઇનની શોધ કરવા માટે તમારે શું કરવું તે જોવાની જરૂર છે અને તમે ઉપકરણો, ટેબ્લેટ્સ અને વેબસાઇટ્સ પર સેંકડો ઉદાહરણો અને પ્રયોગો જોશો.
મટીરીઅલ ડિઝાઇનના રસપ્રદ પાસા એ છે કે તે કેવી રીતે એપ્લિકેશન્સ દેખાય અને મોબાઇલ ડિવાઇસ પર કામ કરે છે તે વિશેની Google ની વિચારણા છે પરંતુ કોઈપણ પ્લેટફોર્મ પર કોઈપણ કદની કોઈપણ સ્ક્રીન પર વિભાવનાઓ લાગુ કરવામાં આવી રહી છે. ગૂગલે સ્પષ્ટીકરણના શરૂઆતના ફકરામાં જણાવેલું, "અમે અમારા વપરાશકર્તાઓ માટે એક દ્રશ્ય ભાષા બનાવવા માટે પડકાર આપ્યો છે કે જે નવીનીકરણ અને તકનીકી અને વિજ્ઞાનની સંભાવના સાથે સારા ડિઝાઇનના ક્લાસિક સિદ્ધાંતોનું સંશ્લેષણ કરે છે. આ સામગ્રી ડિઝાઇન છે આ સ્પેક એક વસવાટ કરો છો દસ્તાવેજ છે જે અપડેટ કરવામાં આવશે કારણ કે અમે સામગ્રી ડિઝાઇનના સિદ્ધાંતો અને વિશિષ્ટતાઓને વિકસાવવાનું ચાલુ રાખીએ છીએ. "
સામગ્રી વિશે વાત કરી, ખૂબ જ સામાન્ય શબ્દોમાં, કાગળ છે અને મટીરીઅલ ડિઝાઇનનું ચિહ્ન એ કાર્ડ છે. સપાટી પર ઈન્ડેક્સ કાર્ડ વિશે વિચારો અને તમે જમણી ટ્રેક પર છો. કાર્ડ એ તત્વ છે જેમાં ફોટા, વીડિયો, ટેક્સ્ટ લિંક્સ અને તેથી વધુ હોય છે, પરંતુ જ્યાં તેઓ મોટાભાગની ક્રિયાપ્રતિક્રિયાત્મક ડિઝાઇનથી જુદા છે તે એક વિષય પર ધ્યાન કેન્દ્રિત કરવા માટે છે. કાર્ડ્સ ગોળાકાર ખૂણાઓ ધરાવે છે, તે હલકા પડછાયા ધરાવે છે જે દર્શાવે છે કે તેઓ સપાટીથી ઉપર છે અને જો તે બધા એક જ વિમાન પર હોય તો તેમને "સંગ્રહ" તરીકે ઓળખવામાં આવે છે.
આ "કેવી રીતે" માં અમે સ્પેક પર આધારિત કાર્ડ બનાવવા જઈ રહ્યા છીએ. વિવિધ ઇમેજિંગ અને રેખાંકન સાધનો સાથે કાર્ડ બનાવવાને બદલે, આપણે તેના પર એક અલગ દિશાથી આવવા જઈ રહ્યા છીએ. અમે એડોબના અનુભવ ડિઝાઇનમાં સાધનોનો ઉપયોગ કરી રહ્યા છીએ જે હાલમાં મેકિન્ટોશ-માત્ર જાહેર પૂર્વાવલોકનમાં છે અને તે મફત છે. તમે અહીં ડાઉનલોડ કરી શકો છો.
ચાલો, શરુ કરીએ.
06 થી 02
એડોબ અનુભવ ડિઝાઇન સીસી માં પ્રોટોટાઇપ આર્ટબોર્ડ બનાવી રહ્યા છે
એક્સપિરિયન્સ ડિઝાઇન સીસી (એક્સડી) માં પ્રારંભ સ્ક્રીનમાંથી એન્ડ્રોઇડ સ્ક્રીન બનાવવાની કોઈ સ્પષ્ટ રીત નથી. જ્યારે આપણે એક્સડી ખોલીએ ત્યારે શું કરવું તે અમે આઈફોન 6 વિકલ્પ પસંદ કરવાનો છે અને જ્યારે ઈન્ટરફેસ ખોલે છે, ત્યારે ટૂલબારના તળિયે અમે આર્ટબોર્ડ ટૂલ પસંદ કરીએ છીએ અને પ્રોપર્ટીઝ પેનલની પસંદગીમાંથી જમણી બાજુએ એન્ડ્રોઇડ મોબાઈલ પસંદ કરો . પછી અમે પસંદગી સાધન પર સ્વિચ, એકવાર આઇફોન આર્ટબોર્ડ નામ પર ક્લિક કરો અને આર્ટબૉર્ડ કાઢી નાખો વધુ નહીં
XD ના વર્તમાન સંસ્કરણમાં, iPhone 6 ની બાજુમાં એક નાનું તીર છે, જે જ્યારે ક્લિક કરે છે, ત્યારે ડ્રોપ-ડાઉન મેનૂ ખોલે છે. ત્યાંથી તમે એન્ડ્રોઇડ મોબાઇલ વર્ઝન પસંદ કરો છો અને એન્ડ્રોઇડ મોબાઇલ આર્ટબર્ડ પસંદ કરેલ ઈન્ટરફેસમાં ખોલે છે.
કાર્ડ માટે યોગ્ય સ્ક્રીન જગ્યા ખુલ્લી છે તેની ખાતરી કરવા માટે, અમે સામાન્ય રીતે સ્કેચ 3 પર પ્રગટ કરીએ છીએ અને આર્ટબૉર્ડમાં સામુદાયિક ડિઝાઇન ટેમ્પલેટમાંથી સ્ટેટ બાર, એનવાય બાર અને એપ્લિકેશન બારને કૉપિ કરીને પેસ્ટ કરીએ છીએ. સ્કેચ 3.2 માં મટીરીઅલ ડિઝાઇન ટેમ્પ્લેટ ( ફાઈલ> ન્યૂ થી ઢાંચો> મટીરીઅલ ડીઝાઇન ) અને અન્ય ખરેખર સારી મફત કાઇલ લેડબેટર છે જે તમે અહીં મેળવી શકો છો. જો તમારી પાસે સ્કેચ ન હોય તો, તમે ફાઇલ> ઓપન UI કિટ> ગૂગલ મટિરીયલ માં મળેલી XD સ્ટિકર્સમાંથી કૉપિ કરીને પેસ્ટ કરી શકો છો. તમે ફોટોશોપ, ઇલસ્ટ્રેટર, ઇફેક્ટ્સ પછી અને સ્કેચમાં ઉપયોગ માટે તેમને Google માંથી ડાઉનલોડ કરી શકો છો.
06 ના 03
એડોબ એક્સડી સીસી આર્ટબોર્ડમાં માલસામાન ડીઝાઇન કાર્ડ ઍડ કરવું
XD ની સૌથી વધુ ઉપયોગી લાક્ષણિકતાઓ એ છે કે એપલ આઇઓએસ, ગૂગલ મટિરીયલ, અને માઇક્રોસોફ્ટ વિન્ડોઝ માટે UI કિટ્સનો સમાવેશ થાય છે. ઘણી રીતોમાં, તેઓ "રેપિડ" શબ્દને "રેપિડ પ્રોટોટીપીંગ" શબ્દમાં ઉમેરે છે.જેથી તે સામાન્ય UI ઘટકોમાં ડિઝાઇનરનું કામ સરળ બનાવે છે, જેમ કે ફોટોશોપ, ઇલસ્ટ્રેટર અથવા ડીઝાઇન એપ્લિકેશનમાં સતત ફરીથી બનાવવાની જરૂર નથી સ્કેચ
અમે જરૂરી UI ઘટક કાર્ડ હતું. તે મેળવવા માટે અમે ફાઇલ> ઓપન UI કીટ> Google સામગ્રી અને નવા દસ્તાવેજ તરીકે ખોલવામાં કીટ પસંદ કરી છે. અમને જે ઘટકની જરૂર હતી તે કાર્ડ્સ શ્રેણીમાં મળી આવી હતી.
આ વિશે અમે જે પ્રેમ કરીએ છીએ તેઓ સામગ્રી બ્લોક સ્પેક્સમાં મુકિત સામગ્રી ડિઝાઇન સ્પષ્ટીકરણ તેમજ ટેક્સ્ટ ફોર્મેટિંગ અને ટાઇપગ્રાફી સ્પેકમાં સ્પેસિંગના સ્પેસનો ઉપયોગ કરે છે.
અમે ઇચ્છતા કાર્ડ શૈલી નીચે ડાબે એક હતી. અમે તેને અમારા માઉસ સાથે હલાવીએ છીએ અને તેને ક્લિપબોર્ડ પર કૉપિ કર્યું છે. કમનસીબે, એક્સડી પાસે ખુલ્લા દસ્તાવેજો માટે ટેબ થયેલ ઇન્ટરફેસ નથી. આપણે શું કરીએ છીએ તે ઓપન ડોક્યુમેન્ટ વિંડોને થોડી નીચે ખસેડીએ છીએ જે આપણે કામ કરી રહ્યા છીએ, તે પસંદ કરો અને પેસ્ટ કરો. ઓપન XD દસ્તાવેજો વચ્ચે ઝડપથી સ્વિચ કરવાનો બીજો રસ્તો છે આદેશ- 'દબાવો .
06 થી 04
એડોબ અનુભવ ડિઝાઇન સીસી માં સામગ્રી ડિઝાઇન એલિમેન્ટ કેવી રીતે સંપાદિત કરવું
જ્યારે XD માં કાર્ડ ક્લિપબોર્ડથી આવે છે ત્યારે તેની સાથે કામ કરવાનું શરૂ કરી શકતા નથી. પ્રથમ વસ્તુ જે તમારે કરવાની જરૂર છે તે કાર્ડ અનગ્રુપ કરવું છે કારણ કે તમારે બીટની ઍક્સેસ અને કાર્ડ કંપોઝ કરવાની જરૂર છે. આવું કરવા માટે, કાર્ડ પસંદ કરો અને ઑબ્જેક્ટ> અનગ્રુપ કરો પસંદ કરો અથવા Shift-Command-G દબાવો
તમારું કાર્ડ હવે ત્રણ ટુકડાઓથી બનેલું છે:
- છબી માટે આછો લીલો બોક્સ
- ટેક્સ્ટ માટે મધ્યમ ગ્રે બોક્સ
- પૃષ્ઠભૂમિ તરીકે ઉપયોગમાં આવતો પાછળનો બૉક્સ.
પ્રથમ પગલું એ હળવા ગ્રે બોક્સને કાઢી નાખવાનો છે. તેનો એકમાત્ર હેતુ છબી માટે પ્લેસહોલ્ડર તરીકે કાર્ય કરવાનો છે જે તેને બનાવે છે, જો તમે પસંદ કરો છો, વૈકલ્પિક
ટેક્સ્ટ સાથેની બૉક્સ વાસ્તવમાં 50% અસ્પષ્ટતા સાથે ડાર્ક ગ્રે છે. આ બૉક્સને ટેક્સ્ટ પૃષ્ઠભૂમિ તરીકે ઉપયોગમાં લઈ શકાય છે અને તમે રંગ અને બૉક્સની અસ્પષ્ટતા બદલી શકો છો.
તે તરત જ સ્પષ્ટ નથી, તેમ છતાં, પ્રકાશ ગ્રે બોક્સ સામગ્રી ડિઝાઇન સ્પેકને અનુસરે છે જેમાં તેના ટોચના ખૂણાઓ 2 પિક્સેલ્સ દ્વારા ગોળાકાર થાય છે. જો તમે કોઈ છબી ઉમેરી રહ્યા હો તો આને ધ્યાનમાં રાખો. તેને ગોળાકાર ખૂણાઓની જરૂર પડશે જે ઇમેજિંગ એપ્લિકેશનમાં અથવા XD માં ઉમેરી શકાય છે.
કેવી રીતે આ કાર્ડની વિશ્રામી સ્થિતિ છે તે જોઈને તેને છાયાની જરૂર છે. સ્પેક એ સ્પષ્ટ કરે છે કે ત્યાં 2 પિક્સેલનાં કાર્ડની વિશ્રામી એલિવેશન છે આ ઉમેરવા માટે, કાળા પૃષ્ઠભૂમિ આકારને પસંદ કરો અને ગુણધર્મો પેનલમાં Y અને B (બ્લુર) મૂલ્યો 2 ને સુયોજિત કરો.
05 ના 06
એડોબ એક્સડી સીસીમાં મટીરીયલ ડિઝાઇન કાર્ડમાં એક છબી કેવી રીતે ઉમેરવી
કાર્ડને જાણવું 344 પિક્સેલ પહોળું છે અને છબી વિસ્તાર 150 પિક્સેલ્સનો ઊંચો છે ( પ્રકાશ ગ્રે બૉક્સની અડધી ઊંચાઇ ) અમે ફોટોશોપમાં છબી ખોલી, તેને કદમાં કાપ્યું અને Photoshop ની નિકાસ તરીકે સંવાદ તરીકે @ 2x વિકલ્પનો ઉપયોગ કરીને તેને સાચવી બૉક્સ છબી Adobe XD માં આયાત કરવામાં આવી હતી.
પછી અમે પેસ્ટબોર્ડ પરની છબી પર પ્રકાશ ગ્રે બૉક્સને ખેંચી અને ઑબ્જેક્ટ> આકાર સાથે માસ્ક પસંદ કર્યું. પરિણામ એ આકારના ગોળાકાર ખૂણાઓને પસંદ કરતી છબી હતી. અમે પછી છબી તેના અંતિમ સ્થાન પર ખસેડવામાં.
સ્થાને છબી સાથે, અમે પછી મધ્યમ ભૂખરા બોક્સનો પૃષ્ઠભૂમિ રંગ બદલ્યો, ટેક્સ્ટ અને લિંક ટેક્સ્ટનો રંગ બદલ્યો.
06 થી 06
એડોબ એક્સડી સીસી ગ્રીડ સુવિધાનો ઉપયોગ કરવો
કાર્ડને પૂર્ણ કર્યા પછી હવે તેને મટીરીઅલ ડિઝાઇન સ્પેક મુજબ યોગ્ય રીતે રાખવાની જરૂર છે. આનો મતલબ એ છે કે કાર્ડની બાજુમાં 8 પિક્સેલ્સ છે અને એપ્લિકેશન બારની નીચે 8 પિક્સેલ્સની જરૂર છે. આવું કરવા માટે, એક વખત આર્ટબોર્ડ નામ પર ક્લિક કરો અને, ગુણધર્મો પેનલમાં, ગ્રીડ પસંદ કરો. આર્ટબર્ડ પર ગ્રીડ દેખાય છે
ડિફૉલ્ટ ગ્રીડનું કદ 8 પિક્સેલ્સ છે જે સામગ્રી ડિઝાઇન માટે એક જ ગ્રીડનું કદ છે. જો તમને કોઈ અલગ કદની જરૂર હોય, તો ગ્રીડ એરિયામાં મૂલ્ય બદલો. જો તમે ગ્રીડનો રંગ બદલવા માંગો છો, તો રંગ ચીપ પર ક્લિક કરો અને પરિણામી રંગ પીકરમાંથી રંગ પસંદ કરો.
દ્રશ્યમાન ગ્રિડ સાથે, કાર્ડ પર ક્લિક કરો અને તેને તેના અંતિમ સ્થાનમાં ખસેડો.
સમાપ્ત કરવા માટે, અમે કાર્ડ પસંદ કર્યું, પુનરાવર્તન ગ્રીડ બટનને ક્લિક કર્યું અને કાર્ડ્સ વચ્ચે અંતરને પણ 8 પિક્સેલ્સમાં બદલ્યું.