Keresés Kategóriák Kedvencek

Őszi weboldal készítése Photoshopban

Készítette: cyrexone
2010. november 3. 13:09:08 - 14773 megtekintés
  • Egyszerű weboldal sablon készítése Photoshopban őszi- és tavaszi dizájnnal, a kezdetektől, egészen a végletekig!

  • Amire szükségünk van

    Adobe Photoshop

  • Őszi weboldal készítése Photoshopban

    Hozzunk létre egy 800x600-as dokumentumot, dupla kattintással konvertáljuk réteggé, majd nevezzük el contentnek. A CTRL+ALT-C-t megnyomva a canvas méretet állítsuk át 1000x800 képpontra. Hozzunk létre egy új réteget, nevezzük el bodynak, húzzuk be a content alá, töltsük ki feketével, legyen gradiant overlay. A style legyen radial, a szín maradjon, a reverse-t változtassuk meg, a scale legyen maximum. Húzzuk le a gradient középpontját oldalra, az opacity legyen 50%, majd rögzítsük ezt a réteget.

    A contenten alkalmazzunk color overlayt, válasszunk őszies színt. Alkalmazzunk rá stroke-ot, ami legyen fehér, 5 pixel és inside. Kattintsunk a stílusokra, legyen inner glow, szín legyen ugyanaz, mint a háttér, csak legyen sötétebb egy picit. A size-ot pedig húzzuk fel egy kicsit. Rögzítsük ezt a layert is.

    Néhány őszies fotót válasszunk ki, nyissunk meg, majd állítsuk be fejlécnek. Hozzunk létre egy új réteget, majd készítsünk egy fekete négyzetet, ami a menü háttere lesz, az átlátszósága legyen 50%. Írjuk fel a menüpontokat fehérrel. Alkalmazzunk egy kis drop shadowt a szövegen.

    Baloldalra tervezzünk egy lekerekített hírek dobozt, alkalmazzunk rajta néhány stílust, a színe legyen világosabb, mint a háttér, a stroke pedig sötétebb. Írjuk be, hogy Hírek, rakjunk elé egy kört a shape layer segítségével. Alkalmazzunk gradiant overlayt. A fejlécből válasszunk ki két színt. Duplikáljuk a feliratot, húzzuk a másik oldalra, írjuk át a szöveget. Készítsünk egy szövegdobozt, szúrjunk be tetszőleges szöveget, kövessük a videón látható formázási utasításokat.

    A Hírek dobozba is illesszünk szöveget, valamint pár fotót is. A fotón is alkalmazzuk a stroke-ot.
    Különböző menüpontokhoz készíthetünk másik fejlécet, akár minden évszakhoz más-más fejlécet készíthetünk.


    http://cyrex.hu/videosmart/template_autumn.jpg
    http://cyrex.hu/videosmart/template_spring.jpg

  • Címkék:

    photoshop weboldal adobe weblap internet fejlesztés design
Kapcsolódó videók Hozzászólások
Exelenct - 13 éve, 10 hónapja

Értem!
Köszönöm szépen a válaszodat!
Várom / várjuk a videódat!

cyrexone - 13 éve, 10 hónapja

Meg fogom csinálni, mert a blogon is folyamatosan kérik. Azért nem foglalkoztam vele eddig, mert komolyabban elő kell hozzá készülnöm, hogy viszonylag folyamatosan le tudjam nyomni egy max. 20 perces videóban.

Egyébként nem látom túl sok értelmét, mert a legtöbb kérdés amit kapok arra utal, hogy a kérdezőknek alapvető fogalma sincs a HTML+CSS-ről. Ezen a szinten nem hiszem, meg fogják érteni a működést, mert ehhez már komolyabb szinten kell ismerni a dolgokat. Max. annyi lesz, hogy lemásolják a kódot és örülnek, hogy működik.

Nekik készítettem a 9 részes sorozatot az alapoktól. Aki azt rendesen megtanulja, elvileg már elegendő tudással rendelkezik ahhoz, hogy le tudjon gyártani egy ehhez hasonló oldalt HTML-ben.

Exelenct - 13 éve, 10 hónapja

Üdv: Cyrex

Köszönöm a feltöltést!!
Úgy gondolom sokan örülnének neki ha elkészítenéd ennek a videónak a folytatását.
(Természetesen én is nagyon örülnék neki!!)
Hogyan is lesz eböl a weblap képből 1 weboldal.

Kellemes ünnepeket kívánok!

Üdv.: Exelenct

gergofoto007 - 13 éve, 10 hónapja

csak egy kérdés.... hogyan tudom az elérni hogy a kész képet használni is tudjam az oldalamon...gondolok itt egy atw-s html es oldalra...ha kell megváltoztatom az oldalt is csak sikerüljön felrakni

Brien97 - 14 éve

köszyh hawer

Vissza Tovább
Mobil verzió - Normál verzió

© 2024 Next Project Kft. - Minden jog fenntartva.