മൊബൈലിനായുള്ള ഇമേജിംഗ് എല്ലായ്പ്പോഴും അത് കാണുന്നില്ല
അച്ചടിക്കപ്പെട്ട പതിപ്പുകളിൽ മാത്രമല്ല, ഐഫോണുകളും ഐപാഡുകളും, Android ഉപകരണങ്ങളും, ആൻഡ്രോയിഡ് ടാബ്ലറ്റുകളുമൊക്കെയായി വെബ്, ഉപകരണങ്ങളായ ഡിസ്പ്ലേകളിലുമുണ്ട്. ഉപരിതലത്തിൽ, ഡിജിറ്റൽ സ്ക്രീനുകളിലേയ്ക്കുള്ള ഞങ്ങളുടെ പ്രവർത്തനം ദൃശ്യമാകുന്ന മാധ്യമങ്ങളുടെ ഒരു നല്ല കാര്യം എന്ന നിലയിൽ ഇത് കാണാൻ കഴിയും. തകരാറുകൾ വലിയ സ്ക്രീനുകളും സ്ക്രീനിന്റെ റെസൊല്യൂഷനുകളുടെ തെളിച്ചമുള്ള സംഖ്യയുമാണ്. CMYK ഫോർമാറ്റിൽ ഒരു 300 dpi റെസല്യൂഷൻ TIFF ഇമേജ് പ്രതിഷ്ഠിച്ച ദിവസങ്ങളിൽ സംഭവിച്ചതെന്താണെന്നത് അറിയാൻ കാലമേതുവിധേയമല്ലാത്ത പ്രയാസങ്ങൾ കേൾക്കുന്നത് അസാധാരണമല്ല. ഓ, പഴയ നല്ല ദിവസങ്ങൾക്ക്!
ആ ദിനങ്ങൾ കഴിഞ്ഞു. ഒരു 200 ൽ 200 ഇമേജ് ഒരു ഉപകരണത്തിൽ പിഴയായി ദൃശ്യമാകുമെങ്കിലും ഇനിയും ക്വാർട്ടർ ക്വാളിറ്റിയായ മറ്റൊരാൾ മൂന്നിലൊന്ന് അളവിൽ മറ്റൊന്നിനും ദൃശ്യമാകുമെന്നാണ് ഇപ്പോൾ നമ്മൾ വാദിക്കുന്നത്. തങ്ങളുടെ നിർമ്മാതാക്കളെക്കാൾ സ്ക്രീനിൽ കൂടുതൽ പിക്സലുകൾ ജാം ചെയ്യാൻ ശ്രമിക്കുമ്പോൾ ഉപകരണ നിർമ്മാതാക്കളുടെ മുന്നിൽ 'റെസല്യൂഷൻ ആർംസ് റേസ്'യായിരിക്കും ഇത്.
ഇത് നാം നമ്മൾ എന്താണ് വിളിക്കുന്നത് "സഫിക്സുകളുടെ ഉദയം" എന്നാണ്. ഒരു വസ്തുവിന്റെ പിൻഭാഗത്ത് @ 2x, @ 3x - അതിഷ്ടിതങ്ങളാണ്. ഉദാഹരണമായി, ശരിയായ ഉപകരണത്തിലെ ശരിയായ ചിത്രത്തിൽ ശരിയായ ചിത്രം ചേർക്കുക. അപ്പോൾ അത് കൂടുതൽ മെച്ചപ്പെടും.
ഞങ്ങളുടെ ജോലിയുടെ വളരെയധികം ഐക്കണുകളും പ്രവർത്തിക്കുന്നു, ഫ്ളാറ്റ് ഡിസൈൻ പ്രമേയത്തിന്റെ ഉയർച്ചയും ചിത്രീകരണ ചിത്രത്തിൽ ചിത്രീകരണവും സ്കെച്ചും പോലെയാണ്. ഡിവൈസുകൾ ലളിതമായി റാം ചെയ്യാൻ കഴിയില്ല. അവ സ്കേലബിൾ വെക്റ്റർ ഗ്രാഫിക്സിലേക്ക് പരിവർത്തനം ചെയ്യണം, ഐക്കണുകൾ സൃഷ്ടിക്കാൻ ഉപയോഗിക്കുന്ന ആപ്ലിക്കേഷനെ ആശ്രയിച്ച് ഒരു എസ്.വി.ജി. ഓപ്ഷൻ പോലും ആകരുത്.
അപ്പോൾ അത് കൂടുതൽ മെച്ചപ്പെടും.
ഒരു പുതിയ തരം സോഫ്റ്റ്വെയറാണ് - പ്രോട്ടോടൈപ്പിങ് ആപ്ളിക്കേഷനുകൾ - നിങ്ങളുടെ ഇമേജുകളും ഐക്കണുകളും ഉപകരണങ്ങളിലേക്ക് മാറ്റുന്നതിനു മുമ്പ് നിയമസഭാ പദവിയായിത്തീരുന്നു, അവയും അവരുടെ പ്രത്യേകതകളും ഉണ്ട്.
ഈ ട്യൂട്ടോറിയൽ ഗ്രാഫിക്കിനായി ഫോട്ടോഷോപ്പിലും സ്കെച്ച് മുതൽ മാറുന്നു, നിങ്ങളുടെ ആശയവും അവസാന വിന്യാസവും തമ്മിലുള്ള ചില വേദഭാഗങ്ങൾ പ്രകടിപ്പിക്കാൻ Adobe Experience Design ഉപയോഗിക്കുന്നത്. നമുക്ക് തുടങ്ങാം.
01 ഓഫ് 05
അഡോബി ഫോട്ടോഷോപ്പിൽ മൊബൈൽ ഡിവൈസുകൾക്ക് ചിത്രങ്ങൾ എങ്ങനെ തയ്യാറാക്കും
ഈ പ്രോസസ്സിലെ ആദ്യ പടി നിങ്ങളുടെ ലക്ഷ്യം ഉപകരണത്തിലോ ഉപകരണങ്ങളിലോ അറിയുകയാണ്. ഈ സാഹചര്യത്തിൽ, നിങ്ങൾ 667 പിക്സൽ ഉയരത്തിൽ 375 പിക്സൽ വീതിയുമുള്ള സ്ക്രീൻ ഏരിയ ഉള്ള ഐഫോൺ 6 ടാർഗെറ്റുചെയ്യും. ഇമേജിന്റെ സ്ക്രീനിന്റെ വീതി ആയി ഡിസൈൻ കോളുകൾ വിളിക്കുന്നു.
ഉപയോഗിക്കേണ്ട ചിത്രം സ്വിറ്റ്സർലൻഡിലെ ബെർണിലെ ബെർ മിൻസ്റ്റർ കത്തീഡ്രലിന് അകത്ത് വെടിവെച്ചു. ഫോട്ടോഷോപ്പിൽ ചിത്രം തുറന്നുകഴിഞ്ഞാൽ, ചിത്രം> ഇമേജ് സൈസ് തിരഞ്ഞെടുക്കുക , ഇമേജിന്റെ അളവുകളും അതിന്റെ റെസല്യൂഷനുകളും പരിശോധിക്കുക. 3006 പി.പി.ഐയുടെ റെസല്യൂഷനുള്ള 3156 x 2592 ഉള്ള ചിത്രവും 23.4 എംബി വലിപ്പമുള്ള ഫയലുകളും പ്രവർത്തിക്കില്ല.
ഇമേജ് സൈസ് ഡയലോഗ് ബോക്സിനുള്ളിൽ Resolution 100 ppi ആയി കുറയ്ക്കുക . ഇമേജ് അളവുകളും മാറ്റുന്നതിനാൽ ഇത് ആദ്യം ചെയ്യുക. Resolution സെറ്റ് ഉപയോഗിച്ച്, വീതി മാറ്റുക 375 പിക്സലുകൾ. ഇമേജ് സൈസ് ഡാറ്റ പരിശോധിക്കുകയാണെങ്കിൽ, ഇമേജ് 23.4 എംബിയിൽ നിന്ന് മൊബൈലിലേക്ക് സൌജന്യമായി 338k ലേക്ക് ചുരുങ്ങിയിട്ടുണ്ട്. മാറ്റം അംഗീകരിക്കുന്നതിന് OK ക്ലിക്ക് ചെയ്യുക , ചിത്ര വലുപ്പം ഡയലോഗ് ബോക്സ് ക്ലോസ് ചെയ്യുക.
02 of 05
അഡോബ് ഫോട്ടോഷോപ്പിൽ ഡയലോഗ് ബോക്സ് എങ്ങനെയാണ് "കയറ്റുമതി ചെയ്യുക ..." ഉപയോഗിക്കേണ്ടത്
എക്സ്പോർട്ട് ചെയ്യാനായി ചിത്രം തയ്യാറായിക്കഴിഞ്ഞാൽ, കയറ്റുമതി > കയറ്റുമതി> കയറ്റുമതി> കയറ്റുമതി> കയറ്റുമതി ചെയ്യുക .
ഈ ഡയലോഗ് ബോക്സ് ഫോട്ടോഷോപ്പിൽ അടുത്തിടെയുള്ള ഒരു കൂട്ടിച്ചേർക്കലാണ്, വർഷങ്ങളായി അവർ ഉപയോഗിക്കുന്ന "സേവ് ഫോർ വെബ്" ഡയലോഗ് ബോക്സിനെ മാറ്റിസ്ഥാപിക്കുകയാണ്. നിങ്ങൾക്കിപ്പോഴും ആവശ്യമുണ്ടെങ്കിൽ, കയറ്റുമതി പോപ്പ് ഡൗൺ വഴി നിങ്ങൾക്ക് ഇത് കണ്ടെത്താം. വ്യക്തമായ കാരണങ്ങളാൽ ഇപ്പോൾ "വെബ് ഫോർക്ക് (ലെഗസി)" എന്നറിയപ്പെടുന്നു. ഇത് ഈ ഡയലോഗ് ബോക്സിലേക്ക് നിങ്ങൾ ആദ്യ സന്ദർശിച്ചിട്ടുണ്ടെങ്കിൽ, ഇവിടെ ഒരു ഹ്രസ്വ പര്യടനം നടക്കുന്നു:
- വലുപ്പം: ഈ നിര ചിത്രത്തിന്റെ ഔട്ട്പുട്ട് വലുപ്പം സജ്ജമാക്കുന്നു. ഈ പ്രദേശത്തെ രസകരമായ വശം അത് ഇമേജിൻറെ വലുപ്പത്തിലാക്കും, ഉപകരണത്തിൽ സ്ക്രീനിൽ വലിയ അളവിലുള്ള പിക്സലുകൾ ഉണ്ടെങ്കിൽ ഇമേജിൽ "ഫസി" ആയി ദൃശ്യമാകില്ല.
- 1X: ഇത് പിടിക്കുക എന്നതിൽ അമർത്തുക, നിങ്ങൾക്ക് നിരവധി വലുപ്പങ്ങൾ ലഭിക്കും. 1x, 2x, 3x എന്നീ വിഭാഗങ്ങൾ പരമ്പരാഗതമായി ആപ്പിളിൽ നിന്ന് ഹൈ ഡിപി ഡിവൈസുകളുമായി ബന്ധപ്പെട്ടിരിക്കുന്നു. അവയും മറ്റു ചിലരും ആൻഡ്രോയിഡ് ഉപകരണങ്ങളുടെ ചിത്രങ്ങൾ തയ്യാറാക്കുകയും ചെയ്യും.
- സഫിക്സ്: ഈ ചോയിസ് നിങ്ങളുടെ വലുപ്പം കാണിക്കും പക്ഷെ അത് @ 2x ആയി അല്ലെങ്കിൽ വലുപ്പത്തെ തിരഞ്ഞെടുക്കും. ഈ സഫിക്സ് ഇമേജ് നാമത്തിലേക്ക് ചേർക്കും.
- + ചിഹ്നം: ഔട്ട്പുട്ടിനായി വിവിധ വലുപ്പങ്ങൾ ചേർക്കാൻ ഇത് ക്ലിക്കുചെയ്യുക. ഈ സാഹചര്യത്തിൽ, അത് രണ്ടുതവണ ക്ലിക്കുചെയ്ത് പോപ് ഡൗണിൽ നിന്ന് 2x ഉം 3x ഉം തിരഞ്ഞെടുക്കുക. ഇത് ഏതെങ്കിലും iOS ഉപകരണത്തിൽ പ്രായോഗികമായിരിക്കും.
- ട്രാഷ് കാൻ: ഇത് ക്ലിക്ക് ചെയ്യുക ഒപ്പം ലൈൻഅപ്പ് മുതൽ നീക്കംചെയ്യും.
- ഫയൽ ക്രമീകരണങ്ങൾ: ഇമേജിലേക്ക് ഏറ്റവും അനുയോജ്യമായ - jpg, png, gif അല്ലെങ്കിൽ svg - ഫോർമാറ്റ് തിരഞ്ഞെടുക്കുക. ഫയൽ വലുപ്പം ഒരു പ്രശ്നമാണ് എങ്കിൽ നിങ്ങൾക്ക് ക്വാളിറ്റി സെറ്റിംഗുകൾ കുറയ്ക്കാനും സാധിക്കും.
- ചിത്രത്തിന്റെ വലുപ്പം: ഇമേജിന്റെ ഭൗതിക അളവുകൾ മാറ്റാൻ കഴിയും.
- ക്യാൻവാസ് സൈസ്: ഇമേജ് ക്യാൻവാസിന്റെ ഭൗതിക അളവുകൾ മാറ്റാം.
- മെറ്റാഡാറ്റ: താങ്കൾക്ക് ചിത്രത്തിന്റെ മെറ്റാഡാറ്റയിലേക്ക് പകർപ്പവകാശവും നിങ്ങളുടെ സമ്പർക്ക വിവരങ്ങളും ചേർക്കാൻ കഴിയും.
പൂർത്തിയാകുമ്പോൾ, കയറ്റുമതി എല്ലാ ബട്ടണിലും ക്ലിക്കുചെയ്യുക. ഇമേജുകൾ എവിടെ സ്ഥാപിക്കണമെന്ന് നിങ്ങളോട് ആവശ്യപ്പെടും. പുതിയ ഫോൾഡർ ബട്ടണിൽ ക്ലിക്കുചെയ്ത് എക്സ്പോർട്ട് ചെയ്ത ഇമേജുകൾ സൂക്ഷിക്കുന്നതിനായി ഒരു ഫോൾഡർ ഉണ്ടാക്കുക എന്നതാണ് ഒരു നല്ല ശീലം. നിങ്ങൾ എക്സ്പോർട്ട് ക്ലിക്ക് ചെയ്യുമ്പോൾ, ഫോൾഡറിലെ ഇമേജുകൾ കാണിക്കും.
05 of 03
സ്കെച്ചിലെ മൊബൈൽ ഡിവൈസുകൾക്കുള്ള ഇമേജുകൾ എങ്ങനെ തയ്യാറാക്കാം 3 ബൊഹീമിയൻ കോഡിംഗിൽ നിന്നും
വെബ്, ആപ്പ് ഡിസൈനിനെക്കുറിച്ചുള്ള ഊന്നൽ മൂലം UX, UI ഡിസൈനർമാർക്കിടയിൽ വളരെ പെട്ടന്ന് തന്നെ ബോഹെമിം കോഡിംഗിൽ നിന്നുള്ള ഒരു മാക്കിന്റോഷ് മാത്രമുള്ള ആപ്ലിക്കേഷനായുള്ള സ്കെച്ച് 3. യഥാർത്ഥത്തിൽ ഫോട്ടോഷോപ്പ് നിരവധി രീതികളിൽ സ്കസെച്ച് ഉപയോഗിച്ച് "പിടിക്കുക" കളിക്കുന്നതിന്റെ വിചിത്രമായ സ്ഥാനത്താണ്.
സ്കെച്ചിലെ മൊബൈലിനായി ഒരു ഇമേജ് തയ്യാറാക്കുന്നതിന്, ആർട്ട്ബോർഡിൽ ചിത്രം തിരഞ്ഞെടുത്ത് പ്രോപ്പർട്ടികളുടെ പാനലിന്റെ ചുവടെയുള്ള എക്സ്പോർട്ട് ചെയ്യാവുന്ന ബട്ടൺ ക്ലിക്ക് ചെയ്യുക . ഇത് എക്സ്പോർട്ട് ഡയലോഗ് ബോക്സ് തുറക്കും. 2x, 3x പതിപ്പുകൾ ചേർക്കുന്നതിന് + ചിഹ്നത്തിന് ക്ലിക്കുചെയ്തതിന് ശേഷം പിൻപിക്സുകളും ചേർക്കുക. പിഎൻജി, ജെപിജി, ടിഎഫ്, പിഡിഎഫ്, ഇപിഎഎസ്, എസ്.വി.ജി എന്നീ ഫോർമാറ്റുകളും ലഭ്യമാണ്. ഈ സാഹചര്യത്തിൽ, JPG തിരഞ്ഞെടുക്കുക. എക്സ്പോർട്ട് ബട്ടൺ ക്ലിക്കുചെയ്ത് ടാർഗെറ്റ് ചെയ്യുക അല്ലെങ്കിൽ എക്സ്പോർട്ട് ചെയ്ത വിവിധ ചിത്രങ്ങൾ പിടിക്കാൻ ഒരു ഫോൾഡർ ഉണ്ടാക്കുക.
05 of 05
ഇമേജിന്റെ മൂന്ന് (അല്ലെങ്കിൽ അതിലും) പതിപ്പുകൾ സൃഷ്ടിക്കേണ്ടതുണ്ട്
നിരവധി വിധങ്ങളിൽ, മൊബൈൽ മാർക്കറ്റിംഗ് തീരുമാനങ്ങൾ "വൈഡ് വെസ്റ്റ്" ആണ് ഒരു വലിപ്പം തീർച്ചയായും എല്ലാ fit ഇല്ല. അഡോബി എക്സ്പീരിയൻസ് ഡിസൈനിൽ നിന്ന് മുകളിൽ പറഞ്ഞ ഉദാഹരണത്തിൽ, ഇമേജ് 2 ഐഫോൺ 6 ആർട്ട്ബോർഡുകളിലും ഒരു Android ഉപകരണ ആർട്ട്ബോർഡിലും സ്ഥാപിച്ചിരിക്കുന്നു. ഇടതുഭാഗത്തുള്ള 1x പതിപ്പ് പകുതി വലിപ്പമാണെന്ന് എങ്ങനെയെന്ന് നോക്കുക. ഇത് ഐഫോൺ 6 ൽ റെറ്റിന സ്ക്രീനിൽ ദൃശ്യമാകുമെന്നത് ഇതാണ്. 2x പതിപ്പ് തികച്ചും അനുയോജ്യമാണ്, Android പതിപ്പ് സ്ക്രീൻ ഓഫ് ചെയ്യുന്നു. ഇമേജ് സ്കെയിൽ ചെയ്യുകയോ അല്ലെങ്കിൽ ഫോട്ടോഷോപ്പിന്റെ ചിത്രം മറ്റൊരു വലിപ്പത്തിൽ കയറ്റുമതി ചെയ്യുക എന്നതാണ് നിങ്ങളുടെ തിരഞ്ഞെടുപ്പ്.
05/05
ആദ്യകാല പരീക്ഷ, ടെസ്റ്റ് ഒരെണ്ണം, ട്രസ്റ്റ് നറീ, ട്രേഡ് ഒന്നും, പ്രത്യേകിച്ച് താങ്കളെത്തന്നെ ആശ്രയിക്കുക
നിങ്ങൾ മനസ്സിലാക്കേണ്ടതെന്താണെന്നത് പ്രക്രിയയുടെ തുടക്കം മാത്രമാണ്. നിങ്ങളുടെ വർക്ക്ഫ്ലോയുടെ ഒരു പ്രധാന ഭാഗമായി കണക്കാക്കപ്പെടാൻ കഴിയുന്ന നിരവധി ഉപകരണങ്ങളിൽ നിങ്ങളുടെ പ്രവർത്തനം കാണുന്നു. ഒരു ആപ്ലിക്കേഷനോ മൊബൈൽ വെബ് പ്രോജക്റ്റുകളിലോ ഉള്ള ഗ്രാഫിക്സ് അസറ്റുകൾ സൃഷ്ടിക്കുന്നതിനുള്ള ആദ്യ ഘട്ടമെന്നത് നിങ്ങൾ അറിഞ്ഞിരിക്കണം.
പ്രോട്ടോടൈപ്പിങ് ആപ്ലിക്കേഷനുകൾ ഉപയോഗിക്കുന്നത് വേദനാശങ്ങളെ തുറക്കുന്നതിനുള്ള ഒരു മികച്ച വഴിയാണ്. പക്ഷേ, അതേ ആസ്തികൾ ഡവലപ്പറിന്റെ ഉപയോഗത്തിനായി ഔട്ട്പുട്ട് ചെയ്യേണ്ടതുണ്ട്. പല സന്ദർഭങ്ങളിലും ഐക്കണുകൾ ഉൾപ്പെടെയുള്ള വസ്തുക്കളുടെ ശാരീരിക അളവുകൾ ഭൌതികമായി വലിയതും svg എന്നാൽ png ഫോർമാറ്റിലുമല്ല. ഒറ്റനോട്ടത്തിൽ, ഇത് മുകളിലേക്ക് അൽപം കുറിച്ചിട്ടേയുള്ളൂ, എന്നാൽ സ്കെയിലിംഗ് ഇമേജുകളുടെ സുവർണ്ണ നിയമങ്ങൾ ഓർക്കുക: സ്കെയിൽ ചെയ്യുന്നതിനേക്കാൾ താഴേക്കിറങ്ങുന്നത് നല്ലതാണ്.
നിങ്ങളുടെ ഡവലപ്പറുമായി വളരെ അടുത്ത് പ്രവർത്തിക്കാനും പ്രോട്ടോടൈപ്പിംഗ് സോഫ്റ്റ്വെയറുകൾ ഡിസൈൻ ചെയ്യാനുള്ള ഒരു മാർഗമായി ഉപയോഗിക്കാനും അടിവരയിടുക എന്നതാണ്. എന്നിരുന്നാലും, ആ ഒരേ ആസ്തി അന്തിമ ഉൽപ്പന്നത്തിന് തയ്യാറായിക്കേണ്ടതുണ്ട്, നിങ്ങളുടെ ഡവലപ്പർക്ക് നിങ്ങളേക്കാളും ആവശ്യം ഉള്ളതിനേക്കാൾ മെച്ചപ്പെട്ട ഒരു ഹാൻഡിൽ ഉണ്ട്.