# Tworzenie ikon - Praktyka

Pierwszą rzeczą, jakiej potrzebujemy, to odpowiedzi na kilka pytań:

1. jak skomplikowany pakiet chcemy otrzymać?
2. jakie rozmiary zastosować?
3. czy zrobimy rysunek, a następnie go pomniejszymy, czy narysujemy każdy rozmiar oddzielnie?

Dla testowego pakietu określamy następujące wymagania:

1. pakiet będzie posiadał trzy uniwersalne ikony i ikony specjalne dla kilku popularnych rozszerzeń;
2. ikony dla rozszerzeń muszą zawierać tekst rozszerzenia i specjalny kolor;
3. kolor dla rozszerzeń będzie odpowiadał analogicznym kolorom z pakietu ikon "amigos";
4. dla każdego rozmiaru obrazek będzie ponownie rysowany;
5. będą miały rozmiary: 16, 32, 48, 96, 256 pikseli.

Jako prototyp zostanie wykorzystany następujący obrazek (znaleziony tutaj):

Do dzieła!

## Uważaj na głowę!

I od razu - stop! Po pierwsze, należy pamiętać, że ikon jest dużo! I każda z nich - ma dużo rozmiarów! A to oznacza, że trzeba będzie wykonać ogrom nudnej, monotonnej pracy.

Tak więc najpierw należy pomyśleć o tym, jak maksymalnie zautomatyzować cały proces i wykluczyć z niego rutynę. Praktyka pokazuje, że lepiej spędzić tydzień na planowaniu automatyzacji procesu, niż trzy na powtarzaniu tych samych czynności. Ponieważ pod koniec pierwszego dnia będziesz po cichu nienawidzić swojego pakietu ikon i będziesz marzył o jego zakończeniu.

## Zabezpieczenie w niezbędne oprogramowanie

Potrzebne będą następujące programy:

- Edytor graficzny - do rysowania obrazów pojedynczych ikon w różnych rozmiarach;
- Edytor ikon - do montowania pojedynczych obrazów o różnych rozmiarach w ikonę;
- Edytor bibliotek ikon - do montażu ikon w bibliotekę;
- Notatnik (najlepiej z podświetlaniem składni xml) - do tworzenia opisu pliku.

Programy były dobierane w taki sposób, aby były dostatecznie intuicyjne i maksymalnie automatyzowały cały proces. W rezultacie wybór padł na następujące programy:

- Edytor graficzny - Adobe Photoshop (darmowa alternatywa: PixBuilder Studio, Artweaver free, The Gimp);
- Edytor ikon - Microangelo Studio (darmowa alternatywa: IcoFX 1.6, Greenfish Icon Editor Pro);
- Edytor bibliotek ikon - Microangelo Librarian (darmowa alternatywa: Greenfish Icon Editor Pro);
- Notatnik z podświetlaniem składni xml - Notepad2 mod (darmowy; inne do wyboru: Notepad++, AkelPad, Dpad).

## Automatyzacja procesu

W procesie myślowym zostały określone zadania, które są rutynowe, ale mogą być zautomatyzowane:

1. szybkie tworzenie ikon we wszystkich rozmiarach;
2. szybkie tworzenie nowej ikony z już istniejących;
3. szybki montaż ikon.

### Szybkie tworzenie ikon we wszystkich rozmiarach

Photoshop posiada doskonałe narzędzie, które pozwala na zapisanie obrazu jako zbioru fragmentów. Jest to Plik -> Zapisz dla Web. Oto jak to działa. Najpierw za pomocą instrumentu "Odcięcie" na obrazku wydzielamy obszary, które będą odpowiadać wielkości ikon:

Następnie, właściwie wykonujemy polecenie Plik -> Zapisz dla Web. W oknie, które się pojawi, dla każdego wcześniej wykrojonego fragmentu ukazuje się format "PNG-24":

W oknie zapisu wybieramy "tylko obrazy" i "tylko niestandardowe elementy"; przy okazji, nazwa pliku zazwyczaj nie jest zachowywana, tak więc można ją wpisać dowolnie:

W efekcie czego, po zapisaniu w podfolderze "images" znajdziemy wszystkie wymagane obrazy, gotowe do zaimportowania do ikony. Pierwszy punkt został wykonany!

### Szybkie tworzenie nowej ikony z już istniejących

Planowane dwie następujące różnice ikon: kolor i rozszerzenie.

Do szybkiej zmiany koloru w Photoshop'ie zostanie użyte dopasowanie warstwy z maskami ("odcień koloru/nasycenie" i "poziomy").

Ale z rozszerzeniami nie jest to już takie proste: jeśli z większymi rozmiarami jest wszystko w porządku, to dla mniejszych rozmiarów rozszerzenia należy rysować piksel po pikselu, aby one były precyzyjne. Lub można korzystać ze specjalnych czcionek. Szukają w Internecie znalazłem dwie poprawne czcionki: Munro i Wendy. Tak więc oba aspekty szybkiego tworzenia nowej ikony z już istniejących zostały zautomatyzowane.

### Szybki montaż ikon

Tutaj jest wszystko proste: Microangelo Studio obsługuje importowanie obrazów bez żadnych dodatkowych pytań, jeśli te obrazki zostaną na niego przeciągnięte. Co więcej, można przeciągnąć wszystkie obrazy jednocześnie. Jedyny mankament - zapisywanie do nowego pliku nie ma skrótu klawiaturowego, a zatem trzeba to wykonać za każdym razem za pośrednictwem menu głównego.

## Rysowanie rozmiarów ikon

Najpierw został narysowany sam duzy rozmiar. Okazał się bardzo podobny, chociaż tło zostało użyte nieco inne:

Następnie kopie wszystkich warstw ikony połączymy i pomniejszymy do nowego rozmiaru docelowego, np. do 96х96. Uzyskany obraz został wykorzystany jako substrat do rysowania pomniejszonego rozmiaru. Dodatkowo elementy zostały dostosowane tak, aby było widać wyraźne granice. Nawet jeśli to nie pasuje do wizerunku jego "starszego brata".

Ostatecznie zostały narysowane wszystkie rozmiary. Dla rozmiaru 16х16 nie działa dodawanie rozszerzenia, więc trzeba zrobić to bez niego:

Następnie, aby szybko zmienić barwę ikony, dodajemy dopasowanie warstw-filtrów z maski rastrowej:

Na tym tworzenie rozmiarów ikon (źródła) jest zakończone. Znajdują się w nim wszystkie rozmiary, automatyczne rozszerzenie i cień, wszystko wygląda elegancko.

Ikony list odtwarzania i audio tworzymy w podobny sposób.

## Montowanie rozmiarów w ikonę

Po zapisaniu w folderze Images obrazków ikony we wszystkich rozmiarach, wykonujemy następującą sekwencję działań:

- Uruchamiamy Microangelo Studio i korzystamy z "Create new icon".
- Należy zamknąć okno dialogowe importu obrazków; następnie program przechodzi do okna głównego.
- W folderze "images" zaznaczamy wszystkie obrazki i przeciągamy na okno Microangelo Studio (jeśli pojawią się ostrzeżenia, należy zgodzić się z nimi).
- Dla rozmiarów 256х256 i 96х96 przypisujemy kompresję w PNG.

Po wszystkich manipulacjach do zapisu ikony korzystamy z "Save As" (z nazwą żądanego rozszerzenia, aby uniknąć pomyłek).

Uwaga: Spis właściwych rozmiarów ma ograniczenie w rozmiarze podglądu do 48х48 pikseli. Dlatego widać tu wyraźnie co byłoby, gdybyśmy przy tworzeniu małych rozmiarów zdecydowali się na zwykła zmianę rozmiaru.

## Tworzenie wszystkich ikon

Wreszcie nadszedł moment, gdy zaczynają dla nas pracować wszystkie nasze automatyzacje. Aby utworzyć następne ikony wymaganych jest pięć prostych kroków:

1. Utworzenie kopii pliku źródłowego, zmiana nazwy zgodnie z rozszerzeniem, które będzie w niej zapisane i otworzenie np. w Photoshop.
2. Dopasowanie rozszerzenia i skorygowanie cienia "klatki" w ikonie.
3. Wykonanie "Save to Web".
4. W folderze "Images" zaznaczenie wszystkich obrazków i przeniesienie ich do okna Microangelo Studio.
5. Kliknięcie na ikonę "Save As".

Tak więc, każda ikona zajmie nam maksymalnie minutę. A to tylko dlatego, że trzeba dobrać kolor ikony. W rezultacie, w ciągu 15-20 minut wszystkie ikony będą zapisane i gotowe do następnego etapu.

## Tworzenie biblioteki ikon

Tworzenie biblioteki ikon wykonujemy następująco:

1. Otwieramy Microangelo Librarian i tworzymy w nim nowy dokument.
2. Wszystkie wcześniej utworzone ikony przeciągamy do okna Microangelo Librarian; w wyskakującym menu wybieramy "Add icons to workspace".
3. Porządkujemy nowo dodane ikony.
4. Bibliotekę ikon zapisujemy za pomocą File -> Save as....

W rezultacie tego, biblioteka ikon przybrała następujący widok:

UWAGA: dla wygody i funkcjonalności pierwsze trzy są typami ikon, następne - ikonami w postaci rozszerzeń, w których znajdą się one w rodzajach plików Light Alloy. Taka organizacja nie jest wymagana, ale znacznie ułatwia życie w kolejnych etapach. Nie zapomnij o zerowej ikonie!

## Tworzenie pliku opisu

Plik opisu tworzony jest zgodnie z zasadami przedstawionymi w teorii tworzenia ikon dla Light Alloy.

<?xml version="1.3"?> <ICONLIB> <AUTHOR name="Gilorn" email="" homepage="http://www.light-alloy.ru" comments="16x32x48x96x256 (RGB + alpha)"/> <ICONS> <ICON id="0" ext="3GP,ASF,AVS,EVO,BIK,TP,QT,RM,RMVB,RV,TS,WEBM,WTV,DVR-MS"/> <!-- video --> <ICON id="1" ext="AIF,AIFC,AIFF,APE,AT3,AU,CDA,DTS,KAR,M4A,MID,MIDI,MKA,MOD,MP1,MP2,MPA,MPC,OMA,RA,RAM,RMI, SND,AMR,AOB,IT,MO3,S3M,WV,XM,OPUS,TAK"/> <!-- audio --> <ICON id="2" ext="ASX,BDMV,IFO,LST,MPLS,PLS"/> <!-- playlist --> <ICON id="3" ext="LAP"/> <ICON id="4" ext="CUE"/> <ICON id="5" ext="M3U,M3U8"/> <ICON id="6" ext="AVI,DIVX"/> <ICON id="7" ext="MPE,MPEG,MPG,MPV,VOB,MTS,M2TS,M1V,M2V"/> <ICON id="8" ext="MKV"/> <ICON id="9" ext="F4V,FLV"/> <ICON id="10" ext="MP4,M4V"/> <ICON id="11" ext="HDMOV,MOV"/> <ICON id="12" ext="OGM,OGX,OGV"/> <ICON id="13" ext="WM,WMV"/> <ICON id="14" ext="AAC"/> <ICON id="15" ext="AC3"/> <ICON id="16" ext="FLAC"/> <ICON id="17" ext="MP3"/> <ICON id="18" ext="OGG"/> <ICON id="19" ext="WAV"/> <ICON id="20" ext="WMA"/> </ICONS> </ICONLIB>

Następująca linia (i podobne) "<!-- video -->" jest komentarzem, który pozwala na robienie notatek na własny użytek i jest ignorowana podczas przetwarzania pliku w programach.

## Efekt końcowy

Efektem naszej pracy jest świeża paczka ikon. Pozostaje tylko sprawdzić, czy nazwa pliku opisu i biblioteki ikon jest zgodna, i to wszystko!