Tak będzie wyglądał nasz ikona aplikacji na końcu. Ale dosyć już gadania. Zaczynamy bezpośrednio w programie Adobe Illustrator...
Krok 1: Tworzenie fundamentu
Kiedy znajdziesz się w programie Illustrator, na początku utwórz nową powierzchnię roboczą poprzez Plik>Nowy. W nowym oknie wybierz format 70x70mm. Potwierdź okno przyciskiem OK.
Weź narzędzie Prostokąt z Pletwy narzędziowej i kliknij raz w dowolnym miejscu na swojej powierzchni roboczej. Następnie pojawi się okno dialogowe, w którym możesz wprowadzić rozmiar swojego prostokąta. Wybierz tutaj rozmiar 35x35mm i potwierdź wszystko przyciskiem OK. To teraz będzie nasze fundament dla ikony aplikacji.
Ponieważ ikony aplikacji Apple nigdy nie są kwadratowe, teraz musimy zadbać o to, żeby zaokrąglić rogi. Wybierz prostokąt i przejdź do górnego paska menu na Efekt>Filtr Stylizacji>Zaokrąglanie rogów ...
W nowym oknie wpisz promień rogu 7mm. Potwierdź wszystko przyciskiem OK.
Po potwierdzeniu tego efektu, rogi będą zaokrąglone, jednak ścieżka nadal pozostaje kwadratowa. Aby to zmienić, przejdź teraz do Obiekt>Zamień przeźroczystość. Teraz efekt został zamieniony na obiekt (ścieżka teraz przebiega dokładnie wzdłuż zaokrąglonych rogów).
W kolejnym kroku potrzebujesz Palety gradientowej. Jeśli jej jeszcze nie otworzyłeś, znajdziesz ją w Okienko>Gradient.
Teraz kliknij na pole gradientowe w Palety gradientowej, aby wypełnić swoje zaokrąglone prostokąt standardowym czarno-białym gradientem. (Jeśli twój prostokąt ma jeszcze Kontur, teraz przyszedł czas, aby go usunąć).
Ustawienie kąta gradientu powinno wynosić 90°, aby przebiegał on góra-dół.
Ponieważ nasza ikona ma otrzymać gradient niebieski, (oczywiście możesz użyć własnych kolorów) przygotowałem już dla ciebie dwie wartości kolorów RGB.
• ciemnoniebieski - 28/57/145
• jasnoniebieski - 84/244/255
Aby teraz przyporządkować te wartości kolorów do gradientu, wystarczy dwukrotnie kliknąć na pola kolorów w Palety gradientowej. Następnie będziesz miał możliwość wprowadzenia wartości RGB.
(Jeśli masz inny tryb kolorów ustawiony tam, kliknij na małą strzałkę w prawym górnym rogu Palety gradientowej, aby wybrać odpowiedni tryb kolorów).
Jeśli to zrobiłeś, wszystko powinno wyglądać mniej więcej tak jak u ciebie. (Rysunek 11).
Aby jeszcze trochę udoskonalić gradient, przejdź do Efekt>Filtr Stylizacji>Wewnętrzne światło ... W trybie metody wypełnienia ustaw Mieszanie. Przy Przezroczystość użyj wartości 75% i przy Rozmycie ustaw 8,8mm. Ponieważ ten efekt chcemy zastosować tylko na zewnętrznej części, zaznacz punkt na Krawędzi. Potwierdź okno przyciskiem OK.
Następnie dodaj do tego całości jeszcze Cień. Możesz to zrobić również poprzez Efekt>Filtr Stylizacji>Cień ... Wybierz ustawienia tego filtra mniej więcej takie jak w rysunku 13. Możesz tutaj trochę eksperymentować.
W następnym kroku skopiujcie prostokąt za pomocą Command+C i wklejcie go ponownie w tym samym miejscu za pomocą Command+F. (Na PC można to zrobić za pomocą Strg+C i Strg+F).
Ponieważ nie potrzebujemy już efektów zastosowanych na kopii prostokąta, musicie je usunąć. Jak niektórzy z Was mogą już wiedzieć, wszystkie efekty i filtry stosowane w programie Illustrator są wymienione w Obszarze wyglądu. Jeśli ten obszar nie jest widoczny, możecie go ponownie wywołać poprzez Okno>Wygląd.
Teraz usuńcie Cień. Możecie to zrobić łatwo przeciągając Cień w Obszarze wyglądu przytrzymując lewy przycisk myszy i upuszczając go na małym koszu w tym obszarze w prawym dolnym rogu.
Nie musicie usuwać Połysku wewnętrznego, ponieważ będziemy go tylko nieco dostosowywać. Jednak wcześniej powinniście zmienić Kolor wypełnienia Waszej skopiowanej kopii prostokąta na biały.
Następnie kliknijcie w Połysk wewnętrzny w Obszarze wyglądu, ustawcie tam tryb na Normalny i wybierzcie głęboką czarność jako kolor. Ustawcie Przezroczystość na 100%, a dla Rozmycia możecie przyjąć wartość 10mm (Rysunek 17).
Aby teraz zestawić tę kopię z leżącym poniżej oryginałem z niebieskim gradientem, po prostu zmniejszcie Przezroczystość do 50% i ustawcie tryb wypełnienia na Miękkie światło. Wszystko to robicie za pomocą Obszaru przejrzystości. (Również ten obszar znajdziecie ponownie w Okno>Przejrzystość).
Dzięki temu kontrast zostanie lekko zwiększony, a nasz ikonka aplikacji zyska na głębi.
Krok 2: Tworzenie promieniście rozchodzącego się korony
W tym kroku zajmiemy się tym, jak stworzyć promieniście rozchodzący się koronę dla ikonki aplikacji. Aby to zrobić, najpierw powinniście na chwilę ukryć oba prostokąty, które stworzyliście w kroku 1, aby ponownie mieć miejsce na swoim obszarze roboczym.
Weźcie narzędzie Liniowe z Paska narzędziowego i ustawcie Kolor konturu na czarny i Grubość konturu na 0,5pt.
Narysujcie teraz linię od środka do góry i przytrzymując lewy przycisk myszy. Gdy narysujecie linię (dalej trzymając lewy przycisk myszy), naciśnijcie klawisz Ctrl + klawisz załącznik z tymi dwiema nawiasami < >.
Teraz krążcie z wciśniętym lewym przyciskiem myszy wokół siebie. W zależności od prędkości poruszania wskaźnika myszy, za pomocą tej kombinacji klawiszy będzie generowanych różnie wiele linii.
Gdy obrócicie się wokół siebie, wasze działania powinny wyglądać mniej więcej jak na rysunku 19. (Spróbujcie kilka razy, ponieważ potwierdza się tutaj powiedzenie "praktyka czyni mistrza").
Zaznaczcie wszystkie linie i zgrupujcie je za pomocą Command+G (na PC: Strg+G). Skopiujcie to za pomocą Command+C i Command+F (na PC: Strg+C i Strg+F) i wklejcie w tym samym miejscu. W tej kopii zmieńcie kolor konturu na biały i lekko obróćcie w prawo lub w lewo, aby czarne linie znów były częściowo widoczne.
Twoje działania powinny teraz wyglądać mniej więcej tak. (Rysunek 20):
Zaznaczcie teraz ponownie wszystkie linie i zgrupujcie je ponownie za pomocą Command+G (na PC: Strg+G).
Teraz możecie ponownie pokazać prostokąty z kroku 1. Upewnijcie się, że środek waszego promieniście rozchodzącego się korony znajduje się mniej więcej w środku waszego prostokąta.
Teraz skopiujcie szary zaokrąglony prostokąt, który dodaliście w kroku 1 do niebieskiego gradientu. (Command+C lub na PC - Strg+C).
Teraz kliknijcie na swoją grupę z koroną promieni i przejdź do Palette transparentności. Tutaj macie teraz możliwość (podobnie jak w Photoshopie) utworzenia maski. Dwukrotnie kliknijcie w obszar widoczny na rysunku 23. Poprzez ten Podwójny klik zostanie utworzona tzw. Maska przeźroczystości.
Po utworzeniu tej maski zauważycie, że Paleta Warstw zmieniła się, dopóki jesteście w masce. Przy użyciu Command+F (na PC: Strg+F) wklejcie teraz wcześniej skopiowany prostokąt do maski. Teraz wystarczy zmienić przepuszczalność z 50% na 10%.
Teraz opuśćcie maskę, aby powrócić do normalnego widoku. Zrób to, klikając raz na białe pole obok symbolu maski. (Rysunek 25).
Krok 3: Utwórz podstawę dla pikogramu
Teraz wykonaliśmy już większość pracy i jesteśmy gotowi, aby wstawić pikogram lub symbol do naszego ikony aplikacji. Jednak musimy najpierw szybko stworzyć podstawę lub małą platformę, aby całość wyglądała lepiej.
Weź narzędzie Elipsa i narysuj okrągłość około środka. (Patrz rysunek 26).
Wypełnij tę elipsę ciemnym niebieskim kolorem. W tym celu użyłem następujących wartości kolorów. RGB - 0/0/255.
Zmniejsz przepuszczalność do około 70% i przejdź do Efekt>>Rozmycie>Gaussian Blur …
Do rozmycia wybrałem Promieni 28 pikseli. Oczywiście możecie również dowolnie zmieniać tę wartość. Potwierdź klikając OK.
Krok 4: Wstaw pikogram
Po zbudowaniu podstawy, przyszedł wreszcie czas. Musimy teraz tylko wstawić pikogram do naszej ikony aplikacji. W plikach roboczych dołączyłem kilka różnych pikogramów jako dodatkowe opcje. Możecie jednak również użyć własnych.
Przejdź do górnego paska menu i wybierz Plik>Wstaw, a następnie wybierz pikogram według własnego wyboru. W moim przypadku jest to komputer z plików roboczych.
... gotowe! .... można by tak sądzić ...
Jednak jest jeszcze kilka drobnych rzeczy do zrobienia. Po pierwsze, pikogram musi dostać Cień. Idź do Efekt>Filter efektu stylizacji>Cień. Orientuj się przy wartościach tego Cienia do rysunku 32.
Krok 5: Dodaj błysk
W ostatnim kroku dodamy błysk, aby całość wyglądała jeszcze lepiej. Weź narzędzie Elipsa i narysuj białą elipsę jak na rysunku 33.
Aby zakończyć, zmień metodę wypełnienia elipsy na Soft Light. Wasza ikona aplikacji jest gotowa.
Podsumowanie:
Mam nadzieję, że tutorial sprawił Wam przyjemność i teraz potraficie tworzyć kilka pięknych ikon aplikacji. W załączonych plikach znajdziecie także mój oryginalny plik roboczy, abyście mogli zobaczyć, jeśli utknęliście w którymś momencie.
Jeśli macie jeszcze pytania na ten temat, napiszcie je po prostu w komentarzach. Postaram się odpowiedzieć na nie jak najszybciej.
Pozdrowienia
Wasz Julian
