Joomla-_modyfikujemy_szablon.pdf
(
800 KB
)
Pobierz
37151845 UNPDF
warsztaty
poziom trudności:
·
Photoshop
24
.psd StarterKit 01/2008 » www.psdmag.org
40 min
24
.psd StarterKit 01/2008 » www.psdmag.org
warsztaty
Joomla
modyikujemy szablon
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.
o autorze
Elżbieta Szejgis
Wykonuje graikę komputerową i strony www z pa-
nelem administracyjnym. Uczy informatyki w dwóch
łódzkich szkołach.
Portofolio i kontakt:
www.graika-komputerowa.net
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>Koniguracja witryny>Nazwa witryny.
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ż-
kę
(
Magic Wand Tool
) [
W
] zaznaczamy obszar, który będziemy mody-
ikować.
planujemy pracę
Rozpakowujemy szablon i wybieramy pliki graiczne, 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ę specyikę 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.
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
)
.
.psd StarterKit 01/2008 » www.psdmag.org
25
0
1
0
3
0
2
0
4
warsztaty
0
5
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 iltr
Chmury
(
Filter>Render>
Clouds
)
. Dwukrotnie stosujemy iltr Flara obiektywu Filtr>Rendering>
Flara obiektywu
(
Filter>Render>Lens Flare
) i otrzymujemy efekt jak na
obrazku.
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
.
0
6
tworzymy muchę
Otwieramy obrazek
shiny_ly.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
)
.
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.
0
7
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.
a może futrzak?
Tło otrzymujemy przez zastosowanie iltra
Chmury
(
Clouds
) i
Gra-
ika
(
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.
26
.psd StarterKit 01/2008 » www.psdmag.org
0
8
0
9
1
0
Joomla
modyfikujemy szablon
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 iltry (
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 modyikację 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.
27
1
1
1
2
1
3
Plik z chomika:
sheryll007
Inne pliki z tego folderu:
Typowa instalacja Joomla.doc
(312 KB)
Joomla-_modyfikujemy_szablon.pdf
(800 KB)
Joomla_ebook_pl_2007.pdf
(616 KB)
joomla-cloner-v1.9.2.rar
(629 KB)
Building a CSS Template for Joomla.rar
(316058 KB)
Inne foldery tego chomika:
design i foto
dieta
dla Moniki
e-booki i audio
fantastyka
Zgłoś jeśli
naruszono regulamin