Coraz powszechniej dla profesjonalistów graficznych pojawia się nie tylko ich praca w druku, ale także w Internecie i na urządzeniach takich jak iPhone, iPad, urządzenia z systemem Android i tablety z systemem Android. Na pozór można to uznać za "dobrą rzecz", ponieważ media, w których pojawia się nasza praca, rozszerzają się na ekrany cyfrowe. Minusem jest liczba ekranów i myląca liczba rozdzielczości ekranu. Często zdarza się, że doświadczeni profesjonaliści zastanawiają się, co się stało z czasami, kiedy obraz TIFF o rozdzielczości 300 dpi w formacie CMYK był normą. Och, stare dobre czasy!
Te dni się skończyły. Musimy teraz walczyć z tym, że obraz o wielkości 200 na 200 może wyglądać dobrze na jednym urządzeniu, a mimo to pojawiać się na innym rozmiarze kwadratu o innym rozmiarze i trzy czwarte. Wszystko sprowadza się do "Resolution Arms Race" prowadzonego przez producentów urządzeń, którzy próbują zablokować więcej pikseli na ekranie niż ich konkurenci.
To prowadzi nas do tego, co nazwiemy "Wzniesieniem Przyrostków". Sufiksy to te rzeczy - @ 2x, @ 3x - przypisane do nazwy obrazu. Zasadniczo, na przykład, umieść właściwy obraz we właściwym miejscu na właściwym urządzeniu. Wtedy robi się jeszcze lepiej.
Wiele z naszych prac polega na pracy z ikonami, a wraz z pojawieniem się ruchu Płaska konstrukcja te rzeczy powstają w takich aplikacjach do rysowania wektorów jak Illustrator i Sketch. Problem polega na tym, że urządzenia po prostu nie mogą renderować plików .ai lub .eps. Muszą być przekonwertowane na skalowalną grafikę wektorową i, w zależności od aplikacji używanej do tworzenia ikon, może nie być nawet opcji SVG.
Wtedy robi się jeszcze lepiej.
Pojawiła się nowa klasa oprogramowania - aplikacje do tworzenia prototypów - które stają się punktem zbiórki, zanim twoje obrazy i ikony są popychane do urządzeń, a także mają swoje cechy szczególne.
Ten samouczek porusza się między Photoshopem i Sketch dla grafiki i przy użyciu Adobe Experience Design, aby zademonstrować kilka punktów bólu pomiędzy twoim pomysłem i ewentualnym wdrożeniem. Zacznijmy.
01 z 05Jak przygotować obrazy do urządzeń mobilnych w Adobe Photoshop
Pierwszym krokiem w tym procesie jest poznanie swojego urządzenia docelowego lub urządzeń. W takim przypadku będziesz kierować reklamy na iPhone'a 6, który ma obszar ekranu o szerokości 375 pikseli i wysokości 667 pikseli. Projekt wymaga, aby obraz był szerokością ekranu.
Obraz do wykorzystania został nakręcony wewnątrz katedry Bern Minster w Bernie w Szwajcarii. Po otwarciu obrazu w Photoshopie wybierz Obraz> Rozmiar zdjęcia aby sprawdzić wymiary obrazu i jego rozdzielczość. Oczywiście obraz o rozdzielczości 3156 x 2592 z rozdzielczością 300 ppi i rozmiarem pliku 23,4 Mb po prostu nie zadziała.
Wewnątrz okna dialogowego Rozmiar obrazu zmniejszyć rozdzielczość do 100 ppi. Zrób to pierwszy, ponieważ wymiary obrazu również się zmienią. Przy ustawieniu Rozdzielczość zmień szerokość na 375 Pikseli. Po sprawdzeniu danych rozmiaru obrazu zauważysz, że obraz zmniejszył się z 23,4 Mb do bardziej mobilnego 338k. Kliknij OK zaakceptować zmianę i zamknąć okno dialogowe Rozmiar obrazu.
Kontynuuj czytanie poniżej
02 z 05Jak korzystać z okna dialogowego "Eksportuj jako …" w Adobe Photoshop
Gdy zdjęcie jest gotowe do eksportu, wybierz "Eksportuj> Eksportuj jako …" , aby otworzyć okno dialogowe Eksportuj jako.
To okno dialogowe jest ostatnim dodatkiem do programu Photoshop i zastępuje okno dialogowe "Zapisz w sieci", z którego korzystali od lat. Jeśli nadal go potrzebujesz, możesz go znaleźć w menu rozwijanym Eksportuj. Jest to, z oczywistych względów, obecnie znane jako "Export For Web (Legacy)". Jeśli jest to Twoja pierwsza wizyta w tym oknie dialogowym, oto krótka trasa:
- Rozmiar: Ta kolumna ustawia rozmiar wyjściowy obrazu. Ciekawym aspektem tego obszaru jest powiększenie obrazu, ale obraz nie pojawi się jako "rozmyte" na urządzeniu ze względu na ogromną liczbę pikseli na ekranie urządzenia.
- 1X: Kliknij na przytrzymaj, a pojawi się w wielu rozmiarach. Kategorie 1x, 2x i 3x są tradycyjnie związane z urządzeniami Hi Dpi firmy Apple i razem z kilkoma innymi przygotują obrazy dla urządzeń z Androidem.
- Przyrostek: Ten wybór wyświetli Twój rozmiar, ale będzie wyświetlany jako @ 2x lub wybrany zostanie rozmiar. Ten sufiks zostanie dodany do nazwy obrazu.
- Znak +: Kliknij, aby dodać różne rozmiary dla wyników. W takim przypadku kliknij dwa razy i wybierz 2x i 3x z menu podręcznego. Obejmuje to praktycznie każde urządzenie iOS.
- Śmietnik: Kliknij to, a wybór zostanie usunięty z listy.
- Ustawienia pliku: Wybierz format - jpg, png, gif lub svg - najlepiej dopasowany do obrazu. Jeśli rozmiar pliku jest problemem, możesz także zmniejszyć ustawienia jakości.
- Rozmiar obrazu: możesz zmienić fizyczne wymiary obrazu.
- Rozmiar płótna: Możesz zmienić fizyczne wymiary płótna obrazu.
- Metadane: Możesz dodać prawa autorskie i swoje dane kontaktowe do metadanych obrazu.
Po zakończeniu kliknij przycisk Eksportuj wszystko. Zostaniesz zapytany, gdzie chcesz umieścić obrazy. Dobrym zwyczajem jest rozwijanie się poprzez kliknięcie przycisku Nowy folder i utworzenie folderu do przechowywania wyeksportowanych obrazów. Po kliknięciu Eksportuj zobaczysz obrazy w folderze.
Kontynuuj czytanie poniżej
03 z 05Jak przygotować obrazy dla urządzeń mobilnych w szkicu 3 z kodowania w języku czeskim
Szkic 3, aplikacja tylko dla komputerów Macintosh z kodowania czeskiego, szybko zyskuje na znaczeniu wśród projektantów UX i UI ze względu na intensywne skupianie się na projektowaniu stron internetowych i aplikacji.W rzeczywistości program Photoshop pod wieloma względami znajduje się w dziwnej sytuacji, w której musi grać "nadrabiać zaległości" w Sketchu.
Aby przygotować obraz na komórkę w Szkole, wybierz obraz w obszarze roboczym i kliknij przycisk Make Exportable u dołu panelu Properties. Spowoduje to otwarcie okna dialogowego Eksportuj. Kliknij znak +, aby dodać wersje 2x i 3x, a także dodaj przyrostki. Dostępne formaty to PNG, JPG, TIF, PDF, EPS i SVG. W takim przypadku wybierz JPG. Kliknij przycisk Eksportuj i ustaw lub utwórz folder do przechowywania eksportowanych różnych obrazów.
04 z 05Dlaczego musisz utworzyć trzy (lub więcej) wersje obrazu
Pod wieloma względami rynek telefonii komórkowej to "dziki zachód" rozdzielczości, a jeden rozmiar zdecydowanie nie pasuje do wszystkich. W powyższym przykładzie z Adobe Experience Design obraz jest umieszczany na 2 obszarach roboczych iPhone 6 i obszarze roboczym urządzenia z Androidem. Zwróć uwagę, że wersja 1x po lewej stronie wydaje się być w połowie wielkości. Dokładnie tak wygląda obraz na iPhone 6 z ekranem siatkówki. Wersja 2x pasuje idealnie, a wersja Androida uruchamia się poza ekranem. Twoim wyborem jest skalowanie obrazu lub eksportowanie obrazu z Photoshopa w innym rozmiarze.
Kontynuuj czytanie poniżej
05 z 05Testuj wcześnie, testuj często, nie ufaj, nie ufaj nikomu, a szczególnie sobie
To, co musisz zrozumieć, to tylko początek procesu. Przeglądanie pracy na jak największej liczbie urządzeń należy uznać za istotny element przepływu pracy. Musisz także pamiętać, że jest to dopiero pierwszy krok w procesie tworzenia zasobów graficznych dla aplikacji lub projektów mobilnych.
Używanie aplikacji do prototypowania to świetny sposób na odkrycie punktów bólu, ale te same zasoby będą musiały być wypuszczone do użytku przez programistę. W wielu przypadkach fizyczne wymiary zasobów, w tym ikon, będą fizycznie ogromne, a nie w formacie svg, ale png. Na pierwszy rzut oka może to wydawać się nieco przesadzone, ale pamiętaj o złotej zasadzie skalowania obrazów: lepiej jest skalować niż zwiększać skalę.
Najważniejsze jest to, aby ściśle współpracować z programistą i korzystać z oprogramowania do prototypowania, aby pokazać swoje zamiary projektowe. W końcu te same zasoby będą musiały być gotowe na produkt końcowy, a twój programista lepiej sobie poradzi z tym, czego potrzebuje od ciebie.
