Het komt steeds vaker voor dat grafische professionals hun werk niet alleen in gedrukte vorm zien verschijnen, maar ook op internet en op apparaten zoals iPhones, iPads, Android-apparaten en Android-tablets. Op het eerste gezicht kan dit worden gezien als een "goede zaak", omdat de media waarop ons werk lijkt te worden uitgebreid naar digitale schermen. Het nadeel is het enorme aantal schermen en het verwarrende aantal schermresoluties. Het is niet ongebruikelijk om doorgewinterde professionals te horen die zich afvragen wat er is gebeurd met de dagen dat een TIFF-afbeelding met 300 dpi-resolutie in het CMYK-formaat de norm was. Oh voor de goede oude tijd!
Die dagen zijn voorbij. We hebben nu te maken met het feit dat een afbeelding van 200 bij 200 prima op één apparaat lijkt en toch nog een kwart op een andere en driekwart formaat op een andere verschijnt. Het komt allemaal neer op de "Resolution Arms Race" die wordt gevoerd door de fabrikanten van apparaten, omdat ze proberen meer pixels op een scherm vast te zetten dan hun concurrenten.
Dit brengt ons bij wat we "The Rise Of The Suffixes" zullen noemen. De achtervoegsels zijn die dingen - @ 2x, @ 3x - geplakt op de naam van een afbeelding. Ze zetten bijvoorbeeld in principe het juiste beeld op de juiste plaats op het juiste apparaat. Dan wordt het nog beter.
Veel van ons werk omvat het werken met pictogrammen en met de opkomst van de platte ontwerpbeweging worden deze dingen gecreëerd in vectortekenprogramma's als Illustrator en Sketch. Het probleem is dat apparaten geen .ai- of .eps-bestanden kunnen maken. Ze moeten worden geconverteerd naar Scalable Vector Graphics en, afhankelijk van de toepassing die wordt gebruikt om de pictogrammen te maken, is er mogelijk zelfs geen SVG-optie.
Dan wordt het nog beter.
Er is een nieuwe klasse van software - prototyping-toepassingen - die het verzamelpunt worden voordat uw afbeeldingen en pictogrammen naar apparaten worden geschoven en ze ook hun eigenaardigheden hebben.
Deze zelfstudie verplaatst zich tussen Photoshop en Sketch voor de grafische weergave en maakt gebruik van Adobe Experience Design om een paar van de pijnpunten tussen uw idee en uiteindelijke implementatie te demonstreren. Laten we beginnen.
01 van 05Hoe beelden voor mobiele apparaten in Adobe Photoshop voorbereiden
De eerste stap in dit proces is uw doelapparaat of apparaten kennen. In dit geval richt u zich op de iPhone 6 met een schermoppervlak van 375 pixels breed en 667 pixels hoog. Het ontwerp vraagt om de afbeelding als de breedte van het scherm.
Het te gebruiken beeld is opgenomen in de Bern Minster-kathedraal in Bern, Zwitserland. Zodra de afbeelding wordt geopend in Photoshop, selecteer Afbeelding> Beeldformaat om de afmetingen van de afbeelding en de resolutie te controleren. Het is duidelijk dat een afbeelding van 3156 x 2592 met een resolutie van 300 ppi en een bestandsgrootte van 23,4 Mb gewoon niet werkt.
In het dialoogvenster Afbeeldingsgrootte, verlaag de resolutie naar 100 ppi. Doe dit eerst omdat de afbeeldingsdimensies ook zullen veranderen. Wijzig de breedte met de resolutie ingesteld op 375 pixels. Als u de Image Size-gegevens controleert, merkt u dat de afbeelding is gekrompen van 23,4 Mb naar een meer mobielvriendelijke 338K. Klik OK om de wijziging te accepteren en het dialoogvenster Image Size te sluiten.
Lees hieronder verder
02 van 05Hoe de dialoog "Exporteren als …" in Adobe Photoshop te gebruiken
Zodra de afbeelding gereed is voor export, selecteer "Exporteren> Exporteren als …" om het dialoogvenster Exporteren als te openen.
Deze dialoogdoos is een recente toevoeging aan Photoshop en vervangt het dialoogvenster "Save For Web" dat ze jarenlang hebben gebruikt. Als je het nog steeds nodig hebt, kun je het terugvinden in het pop-up Exporteren. Het is, om voor de hand liggende redenen, nu bekend als "Export voor Web (oud)". Als dit je eerste bezoek aan dit dialoogvenster is, volgt hier een korte rondleiding:
- Grootte: In deze kolom wordt de uitvoergrootte van de afbeelding ingesteld. Het interessante aspect van dit gebied is dat het de afbeelding zal vergroten, maar de afbeelding zal niet als "fuzzy" op het apparaat verschijnen vanwege het enorme aantal pixels op het scherm van het apparaat.
- 1X: Klik hierop en u krijgt een aantal maten te zien. De categorieën 1x, 2x en 3x worden traditioneel geassocieerd met Hi Dpi-apparaten van Apple en zij zullen samen met een paar anderen afbeeldingen voorbereiden voor Android-apparaten.
- Achtervoegsel: Deze keuze toont je maat, maar deze wordt getoond als @ 2x of de grootte is gekozen. Dit achtervoegsel wordt toegevoegd aan de afbeeldingsnaam.
- Het + teken: Klik hier om verschillende formaten toe te voegen voor uitvoer. Klik in dit geval twee keer op en kies 2x en 3x uit de pop-down. Dit zal praktisch elk iOS-apparaat omvatten.
- De vuilnisbak: Klik hierop en de keuze wordt uit de opstelling verwijderd.
- Bestandsinstellingen: Kies het formaat - jpg, png, gif of svg - het best geschikt voor de afbeelding. Als de bestandsgrootte een probleem vormt, kunt u ook de kwaliteitsinstellingen verlagen.
- Afbeeldingsgrootte: je kunt de fysieke afmetingen van de afbeelding wijzigen.
- Canvas grootte: U kunt de fysieke afmetingen van het afbeeldingsdoek wijzigen.
- metadata: U kunt auteursrecht en uw contactgegevens toevoegen aan de metagegevens van de afbeelding.
Als u klaar bent, klikt u op de knop Alles exporteren. U wordt gevraagd waar u de afbeeldingen wilt plaatsen. Een goede ontwikkeling is om op de knop Nieuwe map te klikken en een map te maken om de geëxporteerde afbeeldingen te bewaren. Wanneer u op Export klikt, worden de afbeeldingen in de map weergegeven.
Lees hieronder verder
03 of 05Afbeeldingen voorbereiden voor mobiele apparaten in Sketch 3 van Bohemian Coding
Sketch 3, een Macintosh-applicatie van Bohemian Coding, wint snel aan populariteit onder UX- en UI-ontwerpers vanwege de intense focus op web- en app-ontwerp.In feite bevindt Photoshop zich in veel opzichten in de vreemde positie dat hij Sketch moet "inhalen".
Als u een afbeelding voor mobiel in Sketch wilt voorbereiden, selecteert u de afbeelding in het tekengebied en Klik op de knop Exporteerbaar maken onderaan in het venster Eigenschappen. Hierdoor wordt het dialoogvenster Export geopend. Klik op het + -teken om de 2x- en 3x-versies toe te voegen en voeg ook de achtervoegsels toe. De beschikbare indelingen zijn PNG, JPG, TIF, PDF, EPS en SVG. Kies in dit geval JPG. Klik op de knop Exporteren en doel of maak een map om de verschillende afbeeldingen geëxporteerd te houden.
04 van 05Waarom u drie (of meer) versies van de afbeelding moet maken
In veel opzichten is de mobiele markt het "Wilde Westen" van resoluties en een maat zeker niet geschikt voor iedereen. In het bovenstaande voorbeeld van Adobe Experience Design is de afbeelding geplaatst op twee iPART 6-tekengebieden en een artboard voor Android-apparaten. Merk op hoe de 1x-versie aan de linkerkant half lijkt te zijn. Dit is precies hoe het beeld zou verschijnen op een iPhone 6 met zijn retina-scherm. De 2x-versie past perfect en de Android-versie loopt van het scherm. Uw keuze is om de afbeelding te schalen of de afbeelding uit Photoshop op een ander formaat te exporteren.
Lees hieronder verder
05 of 05Test Vroeg, Test vaak, vertrouw op niets, vertrouw niemand en vooral jezelf
Wat u moet begrijpen, is dat dit slechts het begin van het proces is. Het bekijken van je werk op zoveel apparaten als je kan moet worden beschouwd als een essentieel onderdeel van de workflow. U moet ook weten dat dit slechts de eerste stap is in het proces van het maken van grafische elementen voor een app of mobiele webprojecten.
Het gebruik van prototyperingstoepassingen is een goede manier om de pijnpunten bloot te leggen, maar deze items moeten ook worden uitgevoerd voor gebruik door de ontwikkelaar. In veel gevallen zijn de fysieke dimensies van de elementen, inclusief pictogrammen, fysiek enorm en niet in het formaat svg maar png. Op het eerste gezicht lijkt dit misschien een beetje overdreven, maar onthoud de gouden regel van het schalen van afbeeldingen: het is beter om te verkleinen dan op te schalen.
De bottom line is om nauw samen te werken met uw ontwikkelaar en prototypesoftware te gebruiken als een manier om uw ontwerpintentie te tonen. Uiteindelijk moeten echter dezelfde items gereed zijn voor het eindproduct en kan uw ontwikkelaar beter omgaan met wat hij of zij nodig heeft dan u.
