Mérei Tamás webdesigner

Tutorial: őszi hangulatú weboldal

Szerző:   |   2010-10-26

Néhány kattintásos őszi hangulatú weboldal template-et fogunk készíteni Photoshopban. Bónuszként egy kis tavasz is helyet kapott 🙂

A videóban elkészített minták

Mérei Tamás Webdesigner

Szerző

Mérei Tamás vagyok, webdesigner. Reszponzív weboldalak készítésével foglalkozom, grafikai tervezéstől a HTML + CSS kódolásig.

Ismerj meg! Nézd meg eddigi munkáimat! Lépj velem kapcsolatba!

40 hozzászólás

  1. Kata
    2014. február 10. hétfő - 17:50

    Szia!
    Bocsi a hülye kérdésért, de ez melyik verziójú photoshop? Az enyém teljesen máshogy néz ki 🙁

    • cyrex
      2014. március 27. csütörtök - 15:33

      Szerintem ez CS4 volt még.

  2. Tripó Krisztina
    2013. október 1. kedd - 22:27

    Nagyon szuper kis tutoriál! Minden lépés követhető világosan! 🙂
    Holnap kezdem a 2. részt, a kódolást!

  3. Megara
    2013. március 31. vasárnap - 18:42

    Hello!
    Én is kezdő vagyok webdesign-ban, ezért szeretném kérdezni, hogy amikor Galéria menüpontot hozunk létre, azon belül hogyan rakjuk be a képeket, hogy meg tudják nézni a látogatók?
    És még egy kérdés: hogyan csinálod olyan gyorsan meg a lekerekített boxot? Milyen billentyűparanccsal?
    Köszi előre is!

  4. DrNeax
    2012. szeptember 22. szombat - 12:21

    ÜdV!

    Photoshop cs3-as verzióm van , és hogyan tudok úgy képeket beimportálni mint a hogy neked van ” 2:22 ” -nél?

    • cyrex
      2012. szeptember 24. hétfő - 07:52

      Nem tudom, de igazából lényegtelen. Nyisd meg a képet külön és kész.

  5. tkm.riku
    2012. július 16. hétfő - 13:00

    Hi! Tudom, nem ide tartozik, de nagyon érdekelne. A weboldalam a 000webhost-on van tárolva és a facebook-os oldalammal szeretném egybekötni. Tehát a facebook-on az RSSGraffiti-t használva. Hogyan kell az rss címet megadni? Mármint mi az rss cím? A blog menüpontomhoz ezt a címet adtam meg, mert ez szerepelt a kódban amit akkor kaptam ha megnyomtam az rss logo-t. http://tkm.comuv.com/blog/feed/ …de nem írja ki a facebook-ra a bejegyzéseket. Miért nem? Hogyan lehetne megoldani? Tudtok segíteni?

    • tkm.riku
      2012. augusztus 28. kedd - 10:25

      nos?

    • Driftking
      2012. augusztus 28. kedd - 17:19

      Biztos, hogy mindent jól állítottál be? Szerintem CTRL+C is jó lenne(oldalról facebook-ra).

    • tkm.riku
      2012. augusztus 28. kedd - 18:31

      Nem szándékozom mindent újrapostolgatni…az a lényeg hogy RSS-sel menjen a face-re önmagától…

    • tkm.riku
      2012. augusztus 31. péntek - 10:06

      Úgy látszik ez a sima /feed-es megoldás nem tetszik neki, pedig érzékelni érzékelte az RSS Graffiti, de mégsem postolgatta ki. Milyen lehetőség van még rá, hogy RSS-en keresztül kiírja a blogpostokat facebook oldalra?

  6. Márk
    2012. július 7. szombat - 09:13

    hogyan kell előhozni a vonalzót??? 🙁

  7. Gergely
    2011. október 15. szombat - 10:14

    Szia!
    Ezek a képek amik a photoshopos videókba vannak azokat honnan vannak ?

    • Gergely
      2011. október 15. szombat - 10:17

      Amugy nagyon jó lett az oldal

    • GeeT
      2012. július 13. péntek - 12:22

      sxc.hu

    • cyrex
      2012. július 15. vasárnap - 17:05

      sxc.hu és istockphoto

  8. Resetx
    2011. augusztus 7. vasárnap - 00:27

    Kedves Cyrex!

    Ezeket a fejléceket, hol találtad?
    illetve az a kérdésem lenne nekem Photoshop CS5 portable verzió van és nem találok mini bridge-t ezt hol kell bekapcsolni vagy mi kell hozzá?

    várom válaszod. köszi

    • bammer
      2011. szeptember 23. péntek - 15:43

      én speciel a deviantart.com- on találtam meg őket….

      mini bridge: window>extensions>mini bridge

    • cyrex
      2012. augusztus 22. szerda - 09:02

      Ott ahol az előttem szóló írta. Nem tudom, hogy a portable változatban is benne van e.

  9. Gery
    2011. május 26. csütörtök - 13:26

    Hello.

    Nekem az lenne a kérdésem hogy hogyan kell azt megcsinálni,hogy a header képek pl automatikusan váltogassák egymást mint ha egy slideshow lenne. ? Mondjuk van 10db képem és azt szeretném hogy az a 10 kép non stop cserélgesse egymást.

    Nagyon jók a videók, gratulálok.

    Üdv

    • fjuhorgasz
      2011. május 27. péntek - 16:45

      hát nekem arra van egy megoldásom, egy template-ből…html-ben bekéri a slideshow-t, és jquery fájlban beállítja h mennyi időnként váltson, milyen legyen a bejövő kép sebessége meg ilyenek…majd átküldöm a template-t ha esetleg küldesz nekem egy e-mailt a kopiroli@gmail.com-ra…

  10. Rockerlev
    2011. május 3. kedd - 01:08

    Szia cyrex!

    nekem a következő bajom van próbálok behúzni képet de mindig kicsi a ps-ba és nagyitásnál meg nagyon pixelesedik igy rossz lesz a minősége de amikor behúztad az őszi képeket azok eredetileg milyen méretűek?
    És amikor kihúztad hogy hogy nem vesztettek a minőségükből

    Űdv Lev

  11. Sunny
    2011. február 15. kedd - 08:40

    Szia!

    A kérdésem az lenne, hogy szeretnék két newsboxot és közé egy body részt, valamint az oldalsó newsboxokban vertikálisan több helyem legyen. Ezekre megoldás volna ha ha a contant magasságát és szélességét nagyobbra állítom? A 800X600 -as contant milyen felbontáshoz készül?Azt nem szeretném, hogy a végén az oldal látogatásához horizontális gördítésre volna szükség.
    Köszönöm a válaszod!

  12. Ps
    2010. december 28. kedd - 17:51

    Értem!
    Köszönöm a gyors választ!
    Végig néztem a “HTML + CSS az alapoktól” videókat, nagyon hasznos videók.
    Az oldal is nagyon jó, ha nem hanyagolod el még sokra viheti! 🙂
    Egész biztosan gyakran fogok felnézni az oldalra!

  13. Ps
    2010. december 28. kedd - 12:44

    Szia!

    Nagyon ügyes vagy photoshop terén!
    Viszont én is arra lennék kíváncsi hogy hogyan tudom megcsinálni a gombokat.
    Esetleg nem csinálnál 1 videót?

    • cyrex
      2010. december 28. kedd - 16:47

      Lesz majd ilyen videó, csak macerás megcsinálni, ezért nem halogatom 🙂

  14. ifjuhorgasz
    2010. november 6. szombat - 15:26

    Ez nagyon jó lett…Nekem nagyon tetszik…Én még NAGYON KEZDŐ “weboldalkészítő” vagyok, bár inkább saját célú weboldalakat csinálnék…lenne pár kérdésem:
    1.- Így hogy megcsinálom ezt a weboldalt photoshoppal akkor a kis szövegekből hogy tudok például frontpage-ben linket csinálni?

    2.- Azt hogy lehet megoldani, hogy ha a szöveg több lesz mint amennyi kifér akkor ne az egész weblapon kelljen legörgetni, hanem csak a szöveges résznél? Mint ennél az oldalnál: cyberc.try.hu

    3.- Ha feltöltöm atw.hu-ra a weboldalam kezdőlapját, és a többi menüpontot amit photoshop-ban megcsináltam, plusz még a frontpage-eseket is akkor ott belül atw-n hogy hivatkozok egymásra?

    Csak ez a 3 kérdésem lenne…légsz válaszolj a kopiroli@gmail.com-ra, és írd oda a válasz elé a kérdés számát!…Persze csak ha van időd, ezért előre is köszi…

    • cyrex
      2010. november 6. szombat - 16:28

      Szia!

      A frontpage-hez nem értek, életemben nem használtam. A kis tartalom dobozon belüli görgetést fixméretű scrollozható DIV-el lehet megoldani, de szerintem kezdőként ne ezekre összpontosíts.

      A hivatkozásaid minden esetben legyenek relatívak, és akkor a weboldalad bárhova feltöltve működni fog. Tehát a beillesztett képek ne úgy nézzenek ki, hogy pl., hogy file:///C:/akarmi/kepek/kep.jpg, hanem csak simán kepek/kep.jpg tekintve, hogy a weblapod HTML állományai az akarmi könyvtárban vannak.

      – cyrex –

    • ifjuhorgasz
      2010. november 6. szombat - 20:31

      de így hogy kép…így hogy lesz gomb?…és foggalmam sincs mi az hogy scrollozható div…van esetleg olyan elérhetőséged ahol közvetlenül lehet beszélgetni?…MSN, Skype, ICQ…Bármi…?

    • cyrex
      2010. november 7. vasárnap - 08:38

      Ez a videó bemutatja, hogyan kell Photoshopban megtervezni egy oldal kinézetét. A darabolás egy teljesen másik téma, majd lesz olyan videó is, de nem tudom még mikor mert hosszú a kívánságlista.

      Most kezdőknek szóló videók fognak következni, majd azokat nézd meg. MSN címet nem tudok adni, ha írsz e-mailt a cyrex@cyrex.hu-ra és van időm válaszolok, de azt nem fogom tudni Neked leírni, hogyan tudod földarabolni, mert az egy hosszabb folyamat, amivel néha órákat is elpöcsöl az ember.

      – cyrex –

    • ifjuhorgasz
      2010. november 7. vasárnap - 15:32

      Értem köszi…

    • ifjuhorgasz
      2010. december 9. csütörtök - 21:10

      engem még az is érdekelne, hogy (gondolom megcsinálni nem próbáltad, ha igen akkor elnézést) meg lehet-e csinálni gimp-pel ezt a sablont, mert az opendir.hu oldalon láttam hogy hogy an lehet websablont csinálni gimppel, de szeretnék ennél a sablonnál maradni mert nagyon tetszik…szóval az érdekelne hogy egyáltalán meg lehet-e csinálni ezt gimp-ben?

    • cyrex
      2010. december 10. péntek - 08:40

      Fogalmam sincs, nem használok Gimp-et, nekem őrült körülményesnek tűnt a használata a Photoshophoz képest plusz instabil volt, állandóan fagyott 🙁 Vitathatatlan előnye, hogy ingyenes, de professzionális munkára aligha alkalmas.

    • ifjuhorgasz
      2010. december 11. szombat - 11:53

      értem köszi…csakhát azért kérdeztem, mert gimphez találtam tutorialt hogy hogyan kell “szeletekre” vagy mikre szétvágni a képet és akkor azt utána html kóddal meg lehet csinálni…de GIMP-hez nem értek, úgy gondoltam megpróbálom a lépéseket oda átvinni de az nehéznek tűnt, nem sikerült…a html nekem meg nagyon bonyolult…főleg css-sel egybekötve…nagyon belezavarodtam, pedig a videók alapján könnyű lenne tanulni…de nekem a sok TAG, meg hogy melyik mit csinál…huh…nehéz megjegyezni…valamikor, persze csak később, lesz majd tutorial arról hogy a photoshop-os részt hogy kell szétvágni?…mert nekem nagyon tetszik ez a kinézet…photoshopot nagyon jól tudom használni…válaszodat előre is köszönöm…

    • cyrex
      2010. december 11. szombat - 12:36

      A Gimp-et felejtsd el, Photoshop-ban van slice tool, de arról nem fogok videót készíteni, mert sosem használom, mindig kézzel darabolok. De a youtube-on van róla rengeteg anyag, pl. ez: http://www.youtube.com/watch?v=ndCfYykFCIU

      Vagy a tutorial.hu-n is van róla leírás:
      http://www.tutorial.hu/slice-tool-avagy-a-kepek-darabolasa/

    • ifjuhorgasz
      2010. december 11. szombat - 13:43

      újra köszi…és akkor ha “feldaraboltam” akkor utána vagy html-ben, vagy pedig weblapszerkesztő progiban hivatkozáshoz ráirányítom…igy már értem…köszi szépen…

  15. Hoszy
    2010. november 5. péntek - 22:44

    Bravó. Nagyon jó. Gratulálok hozzá! Nem tudom hogy te hogyan tudsz ilyeneket készíteni, én általában mindig csak egyszínűeket tudok, amik 80%-ban szürkék. Minden oldal amit terveztem az szürke centrikus lett, tehát én mindig megcsodálom az ilyen szép weboldalakat. Üdvözlettel:Hoszy

    U.i.: Nagyon örülnék, ha felvennéd velem a kapcsolatot, és véleményeznéd, kritizálnád pár munkámat, igaz, még gyerek cipőben járok e téren. Persze, csak ha van időd. A kapcsolatot felvenni velem a hoszy@citromail.hu e-mail címen, vagy a hoszy@hotmail.com MSN címen tudod felvenni. Üdvözlettel.:Hoszy

    • cyrex
      2010. november 6. szombat - 15:23

      Szia!

      MSN-t nem tudok adni, de, ha írsz nekem a cyrex@cyrex.hu-ra, szívesen megnézem a munkáidat 🙂

      – cyrex –

    • cyrex
      2010. november 11. csütörtök - 07:40

      Nem tudok válaszolni a leveledre, mert a citromail szerint spam és visszadobja. Használj másik levelezőt, a citromail a legszarabb ami létezik.

Hozzászólás

Legújabb hozzászólások