background image

warsztaty

24

.psd StarterKit 01/2008 » www.psdmag.org

40 min

poziom trudności:

·

Photoshop

24

.psd StarterKit 01/2008 » www.psdmag.org

background image

25

.psd StarterKit 01/2008 » www.psdmag.org

wybieramy szablon

Przy wyborze powinniśmy kierować się nie tylko wyglądem, ale rów-
nież funkcjonalnością szablonu. Jeżeli chcemy na swojej stronie za-

instalować  dodatkowe  komponenty  i  moduły  takie,  jak:  licznik  odwie-
dzin,  cytaty,  imieniny,  forum  czy  ogłoszenia,  ważne,  aby  szablon  miał 
najważniejsze elementy: 

prawe i lewe menu, top, footer, advert, banner 

czy

 user. Sprawdzamy to dla zainstalowanego już szablonu wybierając 

w panelu 

Witryna>Podgląd witryny>Pozycje modułów. Do tego ćwicze-

nia posłuży nam szablon 

je_redenvy. Nazwa strony wpisywana jest auto-

matycznie. Możemy ją zmienić w panelu administracyjnym, wybierając 
Ustawienia globalne>Witryna>Konfiguracja witryny>Nazwa witryny.

planujemy pracę

Rozpakowujemy  szablon  i  wybieramy  pliki  graficzne,  które  chce-
my  wymienić.  W  naszym  przypadku  są  to

  header.jpg  i  sidebar_he-

ading.png  z  katalogu  images.  Planując  nasze  działania,  musimy  wziąć 
pod  uwagę  specyfikę  szablonu.  W  tym  przypadku  najistotniejsze  są 
dwa elementy. Po lewej stronie nagłówka pojawi się nazwa naszej stro-
ny pisana białą czcionką. Dlatego wybieramy takie tło, na którym ten na-
pis będzie widoczny. Obrazek 

sidebar_heading.png jest tłem do pisanych 

białą czcionką nazw modułów w prawym i lewym menu, kolorystyka po-
winna być dobrana tak, by napisy były czytelne.

zaczynamy

W Photoshopie otwieramy plik

 header.jpg. Jest to bordowe tło z wzor-

kami  liści,  otoczone  szarą  ramką.  Najpierw  zajmujemy  się  oddzie-

leniem  tych  elementów  od  siebie.  Kopiujemy  warstwę  (

Layer>Dupli-

cate  Layer).  Wyłączamy  warstwę  Backgraund.  Wykorzystując  Różdż-
  (Magic  Wand  Tool)  [W]  zaznaczamy  obszar,  który  będziemy  mody-
fikować.

wyodrębniamy ramkę

Usuwamy zawartość zaznaczenia wciskając [

Delete] pozostawiając 

szarą  ramkę  dookoła.  Nazywamy  warstwę 

ramka.  Wybieramy  Za-

znacz>Usuń zaznaczenie (Select>Deselect).

0

1

0

2

0

3

0

4

Joomla

System  Joomla  rozpowszechniany  jest  na  warunkach 
Powszechnej Licencji Publicznej GNU/GPL. Licencja ta po-
zwala na wykorzystywanie oprogramowania na witrynę 
o dowolnej tematyce i dokonywanie w nim zmian. Pobra-
ny z sieci szablon można zmodyfikować. W nagłówkach 
szablonów najczęściej umieszczane są obrazki – winiet-
ki, grafiki, związane z tematyką serwisu. To one, przede 
wszystkim,  przyciągają  wzrok  odwiedzających  witrynę 
internautów. Warto więc, aby ten element szablonu miał 
nasz indywidualny charakter.

modyfikujemy szablon

warsztaty

o autorze

Elżbieta Szejgis
Wykonuje grafikę komputerową i strony www z pa-
nelem administracyjnym. Uczy informatyki w dwóch 
łódzkich szkołach. 
Portofolio i kontakt: 

www.grafika-komputerowa.net

background image

warsztaty

26

.psd StarterKit 01/2008 » www.psdmag.org

tworzymy tło

Dodajemy nową warstwę, [

Ctrl]+[Shift]+[N] o nazwie tło, ustawiamy 

kolor  tła  i  kolor  narzędzia,  wypełniamy  warstwę  kolorem  narzędzia 

korzystając z 

Wiadra z farbą [G]. Stosujemy filtr Chmury (Filter>Render>

Clouds).  Dwukrotnie  stosujemy  filtr  Flara  obiektywu  Filtr>Rendering>
Flara obiektywu 
(Filter>Render>Lens Flare) i otrzymujemy efekt jak na 
obrazku.

tworzymy muchę

Otwieramy  obrazek 

shiny_fly.jpg,  wybieramy  Stempel  (Clone  Stamp 

Tool) [S], wciskamy klawisz [Alt] i klikamy w nos muchy. Wracamy 

do 

header.jpg. Tworzymy warstwę mucha i stemplujemy zaczynając od 

miejsca, gdzie ma znajdować się nos muchy. Powiększamy obrazek na-
rzędziem 

Lupka (Zoom Tool) [Z]. Usuwamy tło dookoła muchy. Ja zasto-

sowałam narzędzia 

Magiczna gumka (Magic Eraser Tool) i Gumka (Era-

ser Tool).

ostatnie ulepszenia

Wzdłuż  krawędzi  muchy  przeciągamy  narzędziem 

Rozmycie  (Blur 

Tool)  [R].  Rozmywamy  również  nogi  owada.  Przesuwamy  warstwę 

ramka  na  wierzch.  Możemy  już  zapisać  nasz  obrazek

  header.jpg.  Zapi-

sujemy  również 

header.psd.  Do  zamiany  pozostał  nam  jeszcze  plik  si-

debar_heading.png.

zmieniamy plik sidebar_heading.png

Zaznaczamy kształt narzędziem 

Różdżka (Magic Wand) [W] o toleran-

cji 80. Tworzymy nową warstwę. Uruchamiamy 

Stempel (Clone Stamp 

Tool), pobieramy źródło z warstwy tło obrazka header.psd i stemplujemy 
po zaznaczonym obszarze. Zapisujemy jako 

sidebar_heading.png.

jak wam się podoba?

Szablon,  po  poprawkach,  widzimy  na  obrazku  powyżej.  Jeśli  osią-
gnięty efekt Was nie satysfakcjonuje, a nasza mucha nie wydaje się 

Wam  dość  sympatyczna,  przechodzimy  do  następnego  kroku.  W  prze-
ciwnym wypadku możemy przejść do kroku 13.

a może futrzak?

Tło  otrzymujemy  przez  zastosowanie  filtra 

Chmury  (Clouds)  i  Gra-

fika (Graphic Pen), kocio.jpg naniesiony jest Stemplem (Stamp) po-

dobnie,  jak  mucha.  Niestety  stracił  na  urodzie  ze  względu  na  mój  brak 
cierpliwości  do  jego  długich  wąsów.  Pamiętamy  o  starannym  usunię-
ciu  resztek  tła  i  kilkakrotnym  przeciągnięciu  narzędziem 

Rozmycie 

(

Blur  Tool)  [R]  wzdłuż  krawędzi  sierści,  aż  do  osiągnięcia  zadowalają-

cego efektu. Jeśli nie polubiliście Mruczka, to teraz proponuję coś, co lu-
bi prawie każdy.

0

5

0

6

0

7

0

8

0

9

1

0

background image

Joomla

modyfikujemy szablon

27

pomarańczowa alternatywa

Wracamy do naszego obrazka 

header.psd zmieniamy kolor tła i na-

rzędzia. Wyłączamy wszystkie warstwy oprócz 

ramki. Tworzymy no-

wą  warstwę 

tło2  [Ctrl]+[Shift]+[N],  wypełniamy  ją  kolorem  narzędzia. 

Stosujemy  po  kolei  filtry  (

Filter>Render>Clouds)  i  (Filter>Sketch>Gra-

phic Pen), a następnie Zanik (Edit>Fade) o ustawieniach, jak na zdjęciu.

dodajemy zdjęcie

Otwieramy  plik 

monety.jpg.  Pobieramy  źródło  Stemplem  (Clone 

Stamp Tool). Przechodzimy do naszego pliku tworzymy warstwę mo-

nety. Ustawiamy 

Opacity: 30 i Flow: 30. Nanosimy monety wedle upodo-

bania. Miejsca, które mają być wyraźniejsze poprawiamy dwa lub więcej 
razy. Na koniec narzędziem 

Smużenie (Smudge Tool) przeciągamy kilka 

razy poziomo zaczynając od brzegu monet. Przenosimy warstwę ram-
ka  na  wierzch  i  możemy  zapisać.  Wykonujemy  modyfikację  pliku 

side-

bar_heading.png, jak w kroku 7; instalujemy szablon.

dwa sposoby na zainstalowanie szablonu

Pierwszym jest wgranie szablonu poprzez ftp do folderu templates. 
Drugim – spakowanie pliku z szablonem 

je_redenvy do formatu zip 

i  zainstalowanie  poprzez  panel  administracyjny.  Gdy  ten  krok  mamy 
już  za  sobą  to  przechodzimy  do  polecenia 

Instalatory>Szaty  witryna. 

W obu przypadkach należy szablon opublikować. Korzystamy z polece-
nia 

Witryna>Szablony>Szablon-witryna,  zaznaczamy  szablon  i  wybie-

ramy  opcję 

Domyślny.  Możemy  również  poszczególnym  podstronom 

przypisać różne szablony, zaznaczając dany szablon i wybierając pole-
cenie 

Witryna>Szablony>Szablon-witryna i opcję Przypisz. 

 

1

1

1

2

1

3