A mobil képalkotás nem mindig az, aminek látszik
A grafikai szakemberek egyre gyakoribbá válnak, hogy munkájukat ne csak a nyomtatásban, hanem az interneten és az olyan eszközökön is megmutassák, mint például az iPhone, az iPad, az Android és az Android tabletta. A felszínen ez "jó dolognak" tekinthető, ahogyan a média munkánk megjelenik a digitális képernyőkön. A hátránya a képernyők puszta száma és a zavaró számú képernyőfelbontás. Nem ritka, hogy a tapasztalt szakemberek azon gondolkodnak, hogy mi történt azokkal a napokkal, amikor a CMYK formátumban 300 dpi felbontású TIFF kép volt a norma. Ó, a jó régi időkben!
Azok a napok vége. Most meg kell küzdeni azzal a ténnyel, hogy egy 200-200 dolláros kép jól mutathat egy eszközön, és mégis megjelenik a negyedéves méret a másik és a háromnegyedes méretben. Mindez valójában leáll a "Resolution Arms Race" -re, amelyet az eszközgyártók vezetnek, mivel megpróbálják eltakarni több pixelt egy képernyőn, mint versenytársaik.
Ez elvezet minket ahhoz, amit "Az utótagok felemelkedésének" nevezünk. Az utótagok azok a dolgok, amelyek - @ 2x, @ 3x - a kép nevéhez fűződnek. Alapvetően, például, helyezze el a megfelelő képet a megfelelő helyre a megfelelő eszközön. Akkor még jobb lesz.
Sok munkánk során az ikonokkal dolgozunk, és a Flat design mozgalom felemelkedésével ezek a dolgok olyan vektoros rajz alkalmazásokban jönnek létre, mint az Illustrator és a Sketch. A probléma az eszközök egyszerűen nem képesek a .ai vagy .eps fájlok megjelenítésére. Meg kell őket konvertálni Scalable Vector Graphics-ba, és attól függően, hogy az ikonok létrehozására használt alkalmazás függvényében létezik-e még SVG-lehetőség.
Akkor még jobb lesz.
Új szoftvercsalád van - Prototípuskészítési alkalmazások - amelyek a gyűjtemény pontjává válnak, mielőtt a képek és ikonok az eszközök felé kerülnek, és sajátosságaik is vannak.
Ez a bemutató a Photoshop és a Sketch között mozog a grafika és az Adobe Experience Design használatával, hogy bemutassa néhány gond pontját az ötlete és az esetleges telepítés között. Lássunk neki.
01/05
Képek készítése mobileszközökre az Adobe Photoshop alkalmazásban
A folyamat első lépése a cél eszköz vagy eszközök ismerete. Ebben az esetben célozni fogja az iPhone 6-ot, amelynek képernyőszöge 375 képpont széles, 667 képpont magas. A tervezés azt kéri, hogy a kép legyen a képernyő szélessége.
A felhasznált képet a Bern Minster katedrálisban lelték Bernben, Svájcban. Miután a kép a Photoshop alkalmazásban nyílik meg, válassza a Kép> Képméret lehetőséget a kép méretének és felbontásának ellenőrzéséhez. Nyilvánvaló, hogy egy kép, amely 3156 x 2592, felbontása 300 ppi, és a fájlméret 23,4 Mb egyszerűen nem fog működni.
A Képméret párbeszédpanelen belül csökkentse a felbontást 100 ppi értékre . Ezt először azért is módosítsa, mert a kép mérete is változik. A felbontás beállításával módosítsa a szélességet 375 képpontra. Ha ellenőrizni fogja a képméret adatait, észre fogja venni, hogy a kép 23,4 Mb-ról egy mobiltelefon-barát 338 k-ra csökkent. A módosítás elfogadásához és az Image Size (Képméret) párbeszédpanel bezárásához kattintson az OK gombra .
02. 05. sz
Hogyan használjuk az "Exportálás mint ..." Párbeszédpanelt az Adobe Photoshop programban
Miután a kép készen áll az exportra, válassza az "Exportálás> Exportálás ..." lehetőséget az Exportálás párbeszédpanel megnyitásához.
Ez a párbeszédpanel a Photoshop legújabb kiegészítése, és helyettesíti a "Save For Web" párbeszédpanelt, amelyet évek óta használnak. Ha még mindig szüksége van rá, megtalálja az Export pop-le. Ez nyilvánvaló okokból most "Export For Web (Legacy)" néven ismert. Ha ez az első látogatása ebben a párbeszédpanelen, itt egy rövid túra:
- Méret: Ez az oszlop határozza meg a kép kimeneti méretét. Ennek a területnek a érdekessége, hogy nagyítja a képet, de a kép nem jelenik meg "fuzzy" -ként az eszközön, mert a képernyőn megjelenő hatalmas képpontok száma.
- 1X: Kattintson a tartsa lenyomva, és számos méretben fog megjelenni. Az 1x, a 2x és a 3x kategóriák hagyományosan az Apple Hi Dpi készülékeihez kapcsolódnak, és néhányan együtt készítenek képeket az Android készülékekre.
- Suffix: Ez a választás megmutatja a méretedet, de megjelenik @ 2x vagy a méret kiválasztva. Ez az utótag hozzáadódik a kép nevéhez.
- A + jel: Kattintson erre a különböző méretek kibontásához a kimenethez. Ebben az esetben kattintson duplán, és válassza ki a 2x és a 3x a pop-le. Ez gyakorlatilag minden iOS eszközre kiterjed.
- A Trash Can: Kattintson erre, és a választás eltávolításra kerül a felállásból.
- Fájlbeállítások: Válassza ki a képhez legjobban megfelelő formátumot - jpg, png, gif vagy svg. Ha a fájlméret aggodalomra ad okot, csökkentheti a Minőség beállításait is.
- Képméret: megváltoztathatja a kép fizikai méretét.
- Canvas Size: Megváltoztathatja a kép vászon fizikai méretét.
- Metaadatok: Hozzáadhat szerzői jogot és kapcsolattartási adatait a kép metaadataihoz.
Ha végzett, kattintson az Összes exportálása gombra. Meg fogják kérdezni, hogy hol kívánja elhelyezni a képeket. Jó szokás a fejlesztéshez, hogy kattintson az Új mappa gombra, és hozzon létre egy mappát az exportált képek tárolásához. Az Exportálás gombra kattintva megjelenik a mappában található képek.
03. oldal, 05. o
Hogyan készítsünk képeket a mobil eszközökre a vázlat 3-ban a csehek kódolásáról
A Sketch 3, a Bohemian Coding csak Macintosh-os alkalmazása, gyorsan növekszik az UX és az UI tervezők körében, mivel nagy hangsúlyt fektet a webes és az alkalmazások tervezésére. Valójában a Photoshop sok szempontból abban a furcsa helyzetben van, hogy a Sketch-el "felzárkózzon".
Ha képet szeretne készíteni a mobilra a Vázlatban , válassza ki a képet a rajztáblán, és kattintson a Tulajdonságok panel alján található "Kibontható" gombra . Ez megnyitja az Export párbeszédpanelt. Kattintson a + jelre a 2x és 3x verziók hozzáadásához, és add hozzá az utótagokat. A rendelkezésre álló formátumok PNG, JPG, TIF, PDF, EPS és SVG. Ebben az esetben válassza a JPG lehetőséget. Kattintson az Exportálás gombra és célozza meg vagy hozzon létre egy mappát az exportált különböző képek tárolásához.
04. 05. sz
Miért kell létrehoznia a kép három (vagy több) verzióját?
Sok szempontból a mobilpiac a "Wild West" a felbontások és egy méret határozottan nem illik az összes. A fenti példában az Adobe Experience Design, a kép 2 iPhone 6 rajztáblára és egy Android-eszköztáblára került. Vegye észre, hogy a bal oldali 1x-es változat félméretűnek tűnik. Pontosan ez a kép jelenik meg az iPhone 6-on a retina képernyőjén. A 2x-es verzió tökéletesen illeszkedik, és az Android verzió lefut a képernyőn. Az Ön döntése, hogy vagy a kép méretét vagy a képet a Photoshopból más méretben exportálja.
05. 05
Tesztelje korai, Gyakran próbálja meg, ne bízz semmit, ne bízz senkiben, és különösen magadban
Amit meg kell értened, ez csak a folyamat kezdete. Ha a munkádat annyi eszközön látod, amennyit csak lehet , a munkafolyamat létfontosságú darabját kell tekinteni. Tudnia kell, hogy ez csak az első lépés az alkalmazás vagy mobil webes projektek grafikus eszközeinek létrehozásához.
A prototípus-alkalmazások használata nagyszerű módja a fájdalompontok feltárásának, de ezeket az eszközöket a fejlesztőnek kell kiadnia. Sok esetben az eszközök fizikai dimenziói, beleértve az ikonokat, fizikailag hatalmasak lesznek, és nem az svg, hanem a png formátumban. Első pillantásra ez talán kicsit felülmúlhat, de ne feledkezzen meg a kép méretezésének aranyszabályáról: jobb lefelé léptetni, mint felmérni.
A lényeg az, hogy szorosan működjön együtt a fejlesztővel, és használjon prototípus-szoftvert a tervezési szándék bemutatásának módjaként. Végül azonban ezeknek az eszközöknek készen kell állniuk a végtermék készítésére, és a fejlesztőnek jobb keze van, mint amire szüksége van.