Co będzie nam potrzebne?
1. Themes Creator (5,5 MB) - program, w którym tworzymy motywy, plik umieszczony na serwerze serwisu http://sonyericsson.bajo.pl (link bezpośredni)
lub ściągaj z sendspace (bezpośredni link):
Ściągaj
2. Adobe Photoshop CS2 9.0 (lub CS1) Final - 330 MB - program graficzny, pobieranie z oficjalnej strony Adobe (link bezpośredni)
3. Windowsowy Paint ;)
Dlaczego te programy?
Adobe Photoshop jest wg. mnie niezbędny, aby zrobić profesjonalny motyw. Mozna oczywiście wykorzystać GIMP'a, Corel'a lub inny program, lecz w tym poradniku skupiam się tylko na Adobe Photoshop - tzn. ilustracje, opisy itp. Paint'a będziemy używać do prostych edycji, aby nie fatygować photoshopa błachostkami
No, teraz możemy zabierać się za robotę...
------------------------------------------------------------------------------
1. Przygotuj sobie 3 tapety. Polecam ściągnąć je z działu "Tapety".
Poniżej 3 przykładowe, na których będzie oparty motyw.
2. Uruchamiamy Themes Creator.
- zostawiamy zakładkę "standby"
- dodajemy tapetę przyciskiem "import", a następnie wybieramy tapetę z listy
- gdy dodaliśmy juz tapetę, należy wybrać kolory: nazwa operatora, czas oraz "soft key'e"
------------------------------------------
Co to są te "soft key'e"?
Jest to nic innego jak te przyciski:
------------------------------------------
Ale chyba nie myśleliście, że zadowolimy się zwykłymi ustawieniami kolorów jeśli o soft key'e chodzi co? ;)
Zabieramy się za Photoshopa.
--------------------------------------------------------------
Tworzymy teraz pasek graficzny, który urozmaica nasz motyw. Tworzymy pasek, który znajdzie się tutaj.
Ja preferuję po prostu zwykłe, białe, trochę przezroczyste paski.
--------------------------------------------------------------
Wersja, którą pobraliście, to wersja tutorial, a więc 30 dniowa. Ja używam Photoshopa CS1, ale między CS2 specjalnej róznicy nie widać ;)
1. Towrzymy nowy dokument o wielkości 176 x 26, ustawiamy przezroczystość.
2. Z narzędzi wybieramy prostokąt
3. Wybieramy kolor biały (domyślny, czyli nic nie zmieniamy)
4. Przez całą długość naszego przezroczystego pola przeciągamy biały prostokąt
5. Wciskamy kombinację CTRL + H, aby pozbyć się denerwującego obramowania
6. Suwakiem (prawy dolny róg) zmieniamy krycie na ok. 20% - 30%
7. Otrzymujemy coś takiego:
8. Tworzymy folder dla naszego motywu, i zapisujemy nasze tworzywo ;)
Plik -> Zapisz jako -> s.png
! plik nie musi nazywać się "s", ale musi być koniecznie w formacie *.png, które wybieramy z listy "format" !
9. Pokaże nam się takie okienko, klikamy na OK.
10. Tak wygląda nasz pasek w zwykłym eksplorerze windowsa:
Dla leniwych poniżej zamieszczam gotowy pasek:
---------------------------
---------------------------
11. Teraz dodajemy nasz pasek (s.png) za pomocą przycisku import tutaj:
Tak wygląda nasz motyw po dodaniu paska:
-------------------------------------------------------------------------
Wypadało by też, aby po przyciśnięciu któregoś z soft key'ów, była jakaś zmiana :) Tworzymy więc grafikę dla tych elementów:
1. Tworzymy nowy dokument: plik -> nowy
szerokość: 88 (ponieważ 176 : 2 = 88)
wysokość: 26
zawartość tła: przezroczyste
2. Z przybornika wybieramy prostokąt, oraz kolor biały (domyślnie). Zamalowujemy nasze przezroczyste pole.
3. Z suwaka ustawiamy przezroczystość na 40 - 50 %
4. Zapisujemy nasz plik jako left.png
! pamiętaj o wybraniu z listy "format" format png !
5. Przywracamy themes creatora i wstawiamy nasz obrazek za pomocą przycisku import tu:
Teraz tworzymy przycisk taki sam, tyle że prawy
1. Plik -> Nowy
szerokość: 176
wysokość: 26
zawartość tła: przezroczyste
2. Gdy utworzylismy już nowy plik, wchodzimy w menu plik -> otwórz -> left.png (czyli plik, który przed chwilą zrobiliśmy)
3. Zawartość pliku kopiujemy do naszego nowego dokumentu
4. Wcześniej skopiowany element wklejamy do naszego dokumentu, i przesuwamy go na koniec prawej krawędzi
5. Gdy pokaże nam się okienko takie jak poniżej, klikamy na OK
Do pobrania: Tutaj wszystkie trzy elementy graficzne:
POBIERZ
PIERWSZA CZESC ZAKONCZONA ! Teraz przechodzimy do zakładki Deskop...
-------------------------------------------------------------------------
1. Przechodzimy do zakładki "Deskop"
2. Importujemy do elementu "Deskop" 2-gą tapetę
3. Przechodzimy do tworzenia podświetlenia ikonek w menu.
4. Tworzymy w Photoshop'ie nowy dokument, przezroczysty o rozmiarach 83 x 62
5. Z przybornika wybieramy elipsę
6. Rysujemy coś takiego i za pomocą CTRL + H usuwamy obramowanie
7. Zapisujemy plik (Plik -> Zapisz -> h.png - pamiętaj, aby z listy "format" wybrać rozszerzenie *.png)
8. Znów pojawi nam się okienko, klikamy na OK
9. Importujemy nasze podświetlenie za pomocą przycisku 'import' tu
10. Teraz dobieramy kolory; zawartość "title tex" zmieniamy na biały (#ffffff), a deskop na dowolny (tylko bez szaleństw )
Do pobrania: highlighting
***********
***********
ZAKONCZONA 3 CZESC! teraz przechodzimy do zakładki "Navigation"
----------------------------------------------------------
1. Wgrywamy za pomocą przycisku import 3 tapetę (Background)
2. Tworzymy podświetlenie
- W Adobe Photoshop wybieramy: Plik -> Nowy -> 169 x 32 i oczywiście przezroczystość
- Wybieramy czarno - biały grandient
- zaznaczamy grandient przeciągając go z góry na dół i powstaje coś takiego
- zmniejszamy krycie do ok. 20 - 25 %
- zapisujemy jako h2.png (plik -> zapisz -> h2.png i pamiętaj, aby z listy format wybrać pozycję '*.png')
- gdy pokaże się okienko, kliknij OK
przypominam, że ten plik importujemy tu:
To jeszcze nie koniec
Teraz wybieramy odpowiednie kolory, proponuję ustawić je tak jak na ilustracji poniżej
-----------------------------------------------------
background zmieniaj jak chcesz, bo on nie ma większego wpływu na to, co stworzyliśmy ;)
Jest to poprostu okienko, które wyskakuje, gdy np. podłaczymy słuchawki.
-----------------------------------------------------
To by było na tyle w 3 częsci. Przechodzimy do części 4 - Tabs
! Uwaga ! Omijamy podtytuł "Row title", gdyż nie ma tam za dużo do roboty! :)
-----------------------------------------------------
Tworzymy ten element:
1. Nowy dokument Photoshop: Plik -> Nowy -> 169 x 55 -> Przezroczysty
2. Wybieramy prostokąt, o białym kolorze
3. Przeciągamy przez całą długość obrazka
4. Ustawiamy krycie na 30% - 35%
5. Zapisujemy plik jako h3.png Plik -> Zapisz -> h3.png (pamiętaj o wybraniu formatu z listy!)
6. Okienko które wyskoczy zatwierdzamy za pomocą przycisku OK
7. Importujemy obrazek za pomocą przycisku import:
Pobierz
********************
********************
Teraz robimy "Tab selected"
1. Nowy dokument Photoshop: Plik -> Nowy -> 51 x 27 -> Przezroczysty
2. Wybieramy grandient
3. Z listy w lewym, górnym rogu wybieramy czarno - biały grandient
4. Przeciągamy go z góry na dół
5. Krycie ustawiamy na 30%
6. Zapisujemy jako tab_se.png (pamiętaj o wyborze formatu *.png z listy)
7. Wyskakujące okienko zatwierdzamy przyciskiem OK
8. Grafikę importujemy przyciskiem import do
Teraz tworzymy "tab unselected"
1. Nowy dokument Plik -> Nowy -> 35 x 23 -> Przezroczysty
2. Wybieramy prostokąt, o kolorze białym
3. Całe pole naznaczamy prostokątem
4. Krycie ustawiamy na 25 %
5. Zapisujemy jako tab_un.png (pamiętaj o wybraniu *.png z listy 'format')
6. Na wyskakujące okienko wciskamy OK
7. Importujemy do
Kolory
ustawiaj według swojego gustu :)
Download
tab_se.png
*******
*******
tab_un.png
*****
*****
Przechodzimy do kolejnej części, czyli Popup.
----------------------------------------------------------------
Niestety, w tej części nie możemy zastosować żadnych przezroczystości, więc pozostaje nam manipulacja kolorami oraz dodawanie niektórej grafiki.
Do "popup title" dodajemy plik h2.png
[img]http://www.fotosik.pl/pokaz_obrazek/pelny/7e56f8134f7c8eec.html[/img]
Do popup highlighting możemy stworzyć takie samo, pół prześwitujące, białe podświetlenie, tylko że w innych wymiarach. Poniżej do ściągnięcia własnie taki plik, który nazwałem h4, i dodałem jeszcze wzorek, który okazał się być praktycznie niewidoczny
*******************
*******************
------------------------------------------------------------------------
Przechodzimy do podpunktu more list.
tutaj także nie możemy robić przezroczystości... ale możemy robić przezroczyste podświetlenia. Do highlighting można użyc h2.png, a ustawiając odpowiednio kolory można uzyskać ładny efekt.
------------------------------------------------------------------------
Teraz idziemy dalej:
Input 1 & Input 2
Nie ma chyba potrzeby aby opisywać specjalnie te podpunkty ;)
Wystarczy dobrze wybrać kolory, lub zrobić tło, za pomocą wyżej opisanych metod w programie Photoshop :)
------------------------------------------------------------------------
Activity Menu:
Activity Menu: Tworzymy tło przezroczyste białe lub grandient, a także inne kolory grandietu itp. Tutaj mamy dowolność, za równo tak jak inne grafiki w tym podpunkcie
------------------------------------------------------------------------
Misc:
Dodaję tutaj opis kolorów tak, abyś mógł sam dobrze je wybrać
Teraz pozostaje nam ten motyw zapisać: File -> Save as... -> motyw.thm
i wrzucamy go na telefonik !
Do pobrania motyw, który wykonałem przy pracy nad tutorialem.
Pobierz
Copyright (C) by omgwtf1 from se-center.info
Redakcja SE-Center.pl nie odpowiada za ewentualne szkody. Wszystkie porady stosujesz na własną odpowiedzialność.
|