Det blir allt vanligare för grafikproffs att inte bara få sitt arbete att visas på skrivbordet utan också på webben och enheter som iPhones, iPads, Android-enheter och Android-tabletter. På ytan kan detta ses som en "bra sak" som media som vårt arbete visas på expanderar till digitala skärmar. Nackdelen är det stora antalet skärmar och det förvirrande antalet skärmupplösningar. Det är inte ovanligt att höra erfarna proffs undrar vad som hände med de dagar då en 300 dpi upplösning TIFF-bild i CMYK-format var normen. Åh för goda gamla dagar!
Dessa dagar är över. Vi måste nu hävda att en 200 till 200 bild kan verka bra på en enhet och ändå visas kvartstorlek på en annan och tre fjärdedelars storlek på ännu en. Allting kommer verkligen ner till "Resolution Arms Race" som utförs av enhetstillverkarna, eftersom de försöker fånga fler pixlar till en skärm än sina konkurrenter.
Detta leder oss till vad vi kallar "Rise Of The Suffixes". Suffixerna är de sakerna - @ 2x, @ 3x - tackade till namnet på en bild. De lägger till exempel den rätta bilden på rätt plats på rätt enhet. Då blir det ännu bättre.
Många av vårt arbete involverar att arbeta med ikoner och med uppkomsten av plattformsrörelsen skapas dessa saker i sådana vektorritningsapplikationer som Illustrator och Sketch. Problemet är att enheter enkelt kan inte göra .ai eller .eps-filer. De måste konverteras till skalbar vektorgrafik och, beroende på vilken applikation som används för att skapa ikonerna, kanske det inte ens är ett SVG-alternativ.
Då blir det ännu bättre.
Det finns en ny klass av programvara - Prototypapplikationer - som blir monteringspunkten innan dina bilder och ikoner blivit utrustade till enheter och de har också sina särdrag.
Denna handledning rör sig mellan Photoshop och Sketch för grafiken och använder Adobe Experience Design för att visa några av smärtpunkterna mellan din idé och eventuella implementering. Låt oss börja.
01 av 05Hur man förbereder bilder för mobila enheter i Adobe Photoshop
Det första steget i denna process är att veta din målenhet eller enheter. I det här fallet riktar du dig till iPhone 6 som har ett skärmområde på 375 pixlar vid 667 pixlar. Designen kräver att bilden ska vara skärmens bredd.
Bilden som ska användas skötades inuti Bern Minster-katedralen i Bern, Schweiz. När bilden öppnas i Photoshop, välj Bild> Bildstorlek för att kontrollera bildens dimensioner och dess upplösning. Självklart kommer en bild som är 3156 x 2592 med en upplösning på 300 ppi och en filstorlek på 23,4 Mb helt enkelt inte att fungera.
Inne i dialogrutan Bildstorlek, minska upplösningen till 100 ppi. Gör det här först eftersom bilddimensionerna också kommer att ändras. Ändra bredden till upplösningen med 375 pixlar. Om du kontrollerar bildstorleksdata kommer du märka att bilden har krympt från 23,4 Mb till en mer mobilvänlig 338k. Klicka på OK för att acceptera ändringen och stäng dialogrutan Bildstorlek.
Fortsätt läsa nedan
02 av 05Så här använder du dialogrutan "Exportera som …" i Adobe Photoshop
När bilden är klar för export, välj "Exportera> Exportera som …" för att öppna dialogrutan Exportera som.
Dialogrutan är ett nytt tillägg till Photoshop och ersätter dialogrutan "Spara för webben" som de använde i flera år. Om du fortfarande behöver det, kan du hitta den i Export-popup-menyn. Det är av uppenbara skäl, nu känt som "Export For Web (Legacy)". Om detta är ditt första besök i denna dialogruta, här är en kort rundtur:
- Storlek: Denna kolumn anger bildens utmatningsstorlek. Den intressanta aspekten av detta område är att det kommer att förstora bilden, men bilden kommer inte att visas som "fuzzy" på enheten på grund av det stora antalet pixlar på enhetens skärm.
- 1X: Klicka på håll detta och du kommer att presenteras med ett antal storlekar. Kategorierna 1x, 2x och 3x är traditionellt förknippade med Hi Dpi-enheter från Apple och de tillsammans med några andra kommer att förbereda bilder för Android-enheter.
- Ändelse: Detta val kommer att visa din storlek men det kommer att visas som @ 2x eller storleken väljs. Detta suffix kommer att läggas till i bildnamnet.
- + Tecknet: Klicka här för att lägga till olika storlekar för utmatning. Klicka i så fall två gånger och välj 2x och 3x från pop-down-knappen. Detta kommer att täcka praktiskt taget alla iOS-enheter.
- Soptunnan: Klicka här och valet tas bort från uppställningen.
- Filinställningar: Välj formatet - jpg, png, gif eller svg - passar bäst för bilden. Om filstorleken är ett problem kan du också minska kvalitetsinställningarna.
- Bildstorlek: Du kan ändra bildens fysiska dimensioner.
- Canvas Storlek: Du kan ändra bildfärgets fysiska dimensioner.
- metadata: Du kan lägga till upphovsrätt och din kontaktinformation till bildens metadata.
När du är klar klickar du på knappen Exportera alla. Du kommer att fråga dig var du vill placera bilderna. En bra vana att utveckla är att klicka på knappen Ny mapp och skapa en mapp för att hålla de exporterade bilderna. När du klickar på Exportera visas bilderna i mappen.
Fortsätt läsa nedan
03 av 05Så här förbereder du bilder för mobila enheter i skiss 3 från Bohemian kodning
Sketch 3, en Macintosh-bara applikation från Bohemian Coding, blir snabbt framträdande bland UX och UI-designers tack vare sitt intensiva fokus på webb- och appdesign.Faktum är att Photoshop, på många sätt, befinner sig i udda ställning att behöva spela "hämta" med Sketch.
För att förbereda en bild för mobil i Sketch, välj bilden på teckensnittet och klicka på knappen Gör exporten tillgänglig längst ner på Egenskaper-panelen. Detta öppnar dialogrutan Exportera. Klicka på + -tecknet för att lägga till 2x- och 3x-versionerna och lägg till också suffixerna. De tillgängliga formaten är PNG, JPG, TIF, PDF, EPS och SVG. Välj i så fall JPG. Klicka på Exportera knappen och rikta in eller skapa en mapp för att hålla de olika bilderna som exporteras.
04 av 05Varför behöver du skapa tre (eller fler) versioner av bilden
I många avseenden är mobilmarknaden "Wild West" av resolutioner och en storlek passar definitivt inte alla. I ovanstående exempel från Adobe Experience Design placeras bilden på 2 iPhone 6-teaterplattor och en Android-enhetens tavla. Lägg märke till hur 1x-versionen till vänster verkar vara halvstorlek. Det här är precis hur bilden skulle visas på en iPhone 6 med sin näthinneskärm. 2x-versionen passar perfekt och Android-versionen går av skärmen. Ditt val är att antingen skala bilden eller exportera bilden av Photoshop i en annan storlek.
Fortsätt läsa nedan
05 av 05Testa tidigt, testa ofta, lita på ingenting, lita på ingen och speciellt dig själv
Vad du behöver förstå är att detta bara är början på processen. Att se ditt arbete på så många enheter som du kan måste betraktas som en viktig del av arbetsflödet. Du måste också vara medveten om att detta bara är det första steget i att skapa grafiska tillgångar för en app- eller mobilwebprojekt.
Att använda prototypapplikationer är ett bra sätt att avslöja smärtpunkterna, men de samma tillgångarna måste utföras för att användas av utvecklaren. I många fall kommer de fysiska dimensionerna av tillgångarna, inklusive ikoner, att vara fysiskt stora och inte i svg men png-format. Vid första anblicken kan det här tyckas vara lite överst, men kom ihåg den gyllene regeln för att skala bilder: det är bättre att skala ner än att skala upp.
Grunden är att arbeta nära din utvecklare och att använda prototypprogramvara som ett sätt att visa din designintention. Så småningom måste de samma tillgångarna vara redo för slutprodukten och din utvecklare har ett bättre handhavande på vad han eller hon behöver än du.
