Ugrás a főoldalra!

Felhasználónév:

Jelszó:

 :: ".$_ASWC_['NAME']." ".$_ASWC_['VERSION']." ".$_ASWC_['STATUS'];?> - [Látogatók: ]  
Freelance Jobs

Témaköreink

 


On-line

Dev, Admin: 0
Lektorok, írók: 1
  ÷Magus|BOT
Felhasználók: 0
Vendégek: 1
Tegnap: 0
E havi:
 

Statisztika

Oktatóanyagok száma
 Publikus: 128

Legolvasottabb írónk
 outesticide 366150

Legszorgalmasabb írók
1. balymo 24
2. outesticide 20
3. tipli 19
4. adrob 18
5. akciolap 15

Legolvasottabb címek
1. CSS
Egyszerü vízszintes menü és vízszintes menü legördülő almenükkel [55625]
2. CSS
Bevezetés a CSS alapjaiba [31005]
3. CSS
A pozícionálás, és a z-index [30487]
4. CSS
A felhasználói felület - első rész [24823]
5. CSS
Függőleges menü, legördülő almenüvel [24760]
 

 

Photoshop -> Futurisztikus weblap design I.

Író: tipli ( tipli@netoktato.hu )
 
Készült: 2006-02-28 16:21:05
Lektorálta: Wicky
Lektorálva:
2006-03-23 17:05:59 [6840]

1. Lépés

Elég régen írtam már új anyagot, úgyhogy nem szaporítanám a szót, bele is kezdek.
Mostani anyagunkban egy weboldal kinézetét fogjuk megtervezni.
Nyissuk meg a Photoshop-ot. :)

2. Lépés

1

Egy weboldalnál elsősorban el kell terveznünk, hogy milyen legyen a szerkezeti felépítése, hol lesz a fontos információ, hol lesznek a menüpontok, ha lesz rajta reklám, azt hová tesszük és hasonlókat.
Én a fentihez hasonló felépítésűre gondoltam. Persze biztos, hogy nem pontosan ekkorák lesznek a különálló felületek, de fontos, hogy legyen egy vázlatunk, amiből kiindulhatunk

3. Lépés

2

Először is,egy új Layer-en megtervezzük a logót. Pontosabban a logó formájának felét. Legegyszerűbb módszer, ha a Rectangular Marquee Tool-t és a Polygonal Lasso Tool-t kombináljuk

4. Lépés

3

Végül a fenti rajzot kaptuk.
A sötét “füleket” kijelöltem, és egy új, az eredeti alatti rétegre helyeztem. Az eredeti réteget elneveztem logo-nak

5. Lépés

4

Most megduplázzuk a logo Layer-t, majd Filter-Stylize-Find Edges.

6. Lépés

5

Image-Adjustments-Invert (CTRL+I).
Fogjuk a Magic Wand Tool-t, és kijelöljük vele a most feketére változott felületet.
Kitöröljük a kijelölt részt.
Filter-Stylize-Emboss
Angle: -16
Height: 3
Amount: 32%

7. Lépés

6

Ugyanezt megcsináljuk a régebben elkülönített fülekkel is, majd azokat egy picit megsötétítjük.

8. Lépés

7

Most kijelöljük a logo réteg közepén levő üres részt, és leöntjük sötétkékkel (majdnem fekete) egy új, a fülek alatti rétegen.
Ugyanezt a réteget megduplázzuk, és a fülek fölé tesszük, majd az átlátszóságot (Opacity) 32-re állítjuk.
07.jpg

9. Lépés

8

A jelenlegi réteg fölött létrehozunk egy új réteget.
Brusth Tool-Soft Diameter (az a kör alakú ecset, halvány szélekkel).
Méret kb. 15-17
Fehér színnel rajzolunk egy pontot a sarokba.

10. Lépés

9

Smudge Tool-lal elmaszatoljuk úgy, mintha üveg lenne.

11. Lépés

10

Itt-ott megfényeztem Dodge Tool-lal.

12. Lépés

11

Minden réteget megduplázunk, eltolunk a kép másik oldalára, összeillesztjük a párjával, összevonjuk vele, és korrigálunk ott, ahol szükséges, és a fenti ábrát kapjuk.

13. Lépés

12

Egy új rétegen, amit a logo fölé teszünk, létrehozzuk a fenti alakzatot.
Mégpedig a következőképp:
Bush Tool-Hard Round.
Méret: 9.
Húzunk vele egy függőleges csíkot. (Ha a SHIFT-et tarjuk, biztosan egyenes lesz.)
Ezt a csíkot megsokszorozzuk (kinek, hogy felel meg. pl. Duplicate Layer, Layer via Copy, Copy-Paste stb.), majd a csíkokat egymás mellé helyezzük.

14. Lépés

13

Lemásoljuk a réteget, Find Edges a felsőn, kitöröljük a fehér felületeket, és Invert.
Korrigáljuk, és íme az eredmény.

15. Lépés

14

Én úgy terveztem, hogy a felső részen lesznek a menü elemei, tehát ott kellene létrehozni valami menüfélét.
Ezért rajzolunk egy új alakzatot egy új rétegen, azzal a módszerrel, amivel a logót is készítettük.

16. Lépés

15

Egyelőre ennyi. Legközelebb folytatjuk.

* Minden további kérdéseddel fordulj az anyag írójához.

 

Hello Vendég

Az oktatóanyagok olvasásához be kell jelentkezned.

Szeretnék regisztrálni.

Elfelejtettem a jelszavam!
Kiküldöm magamnak!