A legjobb 25 Web Design Tutorial

A számítástechnika és azon belül a web napjaink egyik leggyorsabban fejődő területe, így szinte lehetetlen néhány száz órába belesűríteni az alapoktól mindent. Cikkünk célja az intézményünkben végzett résztvevők segítése további, önálló tanulásukban.

Ha ismered a HTML, CSS, Photoshop és a webdesigner mesterség alapjait, akkor jó helyen jársz, olvasd tovább cikkünket!  Ha nem, akkor mindenekelőtt érdemes ezeket az alapokat megtanulni egyik webdesign tanfolyamunkon.

Az Top School Oktató Központ évek óta foglalkozik webszerkesztő és webdesigner tanfolyamok és képzések szervezésével. A közel egy évtizedes múltra visszatekintő oktatási munka és a képzési programok jól felépített, jól strukturált tananyagrendszere már több átalakításon ment át az évek során. Minden változatás azt a célt szolgálta, hogy a képzési anyag elsajátítása könnyebb és egyszerűbb legyen. Ez a cikk a megszerzett ismeretek továbbfejlesztését szolgálja, nem kezdő tananyag!

Webdesigner komplex tanfolyamok:

• Webdesigner
• Web videó készítő
• Webprogramozó

Webdesigner modul képzések:

• Webszerkesztő
• Illustrator
• Flash animáció
• Photoshop

A webdesign tutoriálokról, s azok nyelvéről

Sajnos az informatika nyelve az angol, így a legtöbb tutorial angol nyelvű. Ahhoz, hogy webdesign szakmában képesek legyünk fejlődni és ne legyünk folyamatosan valamennyire lemaradva, meg kell tanulnunk angolul. Kb. 100 órás tanfolyamon már meg lehet szerezni az „induló” nyelvi kompetenciákat.

Angol tanfolyamainkról és nyelvi képzéseinkről itt tájékozódhatsz: angol nyelvtanfolyam

Cikkünk írásakor iskolánk speciális, angol nyelvi képzéshez kapcsolódó akciót hirdetett: minden komplex képzésre beiratkozó résztvevő ingyen járhat angol nyelvi kurzusra.

A webdesign segédleteket témakörönként csoportosítottuk, ezek a következők:

• Grafikai tervezés, azaz Graphic Design
• HTML, CSS, PSD to HTML
• JQuery

Grafikai tervezés (Graphic Design)

Ebbe a csoportba kerültek azok a segédletek, amelyek célja, hogy webdesign grafikai terveink jobbak, szebbek és célzottabbak legyenek.

Tipográfia kezdőknek

Ez a webdesigner tutorial a tipográfia alapjaival foglalkozik, és némi segédletet ad az első grafikai tervek elkészítéséhez. Kezdőknek ajánlott, haladó designerek és képzett grafikusok átléphetik.

A logó, mint WEB Font

A szépen megtervezett és gyönyörű tipográfiával elkészített logókat hosszú éveken át nem tudtuk megjeleníteni a weboldalakon, képként, úgynevezett img tag segítségével kellett beszúrni. Ez a webdesign tutorial egyfajta megoldást nyújt erre a problémára.

 Flat webdesign Tutorial – Landing Page

A Flat webdesign meglehetősen új dolog, az IOS 7 operációs rendszerrel jelent meg – sok webdesigner szereti, sokan pedig támadják. A tutorial bemutatja, hogyan készíthet a webdesigner lélegzetelállító portfólió nyitóoldalt a Flat Design használatával.

HTML, CSS, PSD to HTML

Kezdő Webdesign videó tutorial – Photoshop eszközök, panelek és tervezés

Ebben a segédletben Photoshop videó turorialokat láthatunk, amelyek hasznosak minden webdesigner számára a tervezéshez, wireframe elkészítéséhez és a HTML/CSS kód elkészítéséhez. Szükséges hozzá a Photoshop tanfolyam anyagának ismerete.

Saját rácsrendszer készítése Photoshopban

A rácsszerkezet használata a webdesign tervezésben nem új keletű dolog, korábban könyvek, kiadványok szerkesztésénél is használták, mert igen nagy segítséget nyújt a grafikai tervezésben. A tutorial azt mutatja be, hogyan készíthet a webdesigner magának rácsszerkezet-rendszert (Grid System-et).

Felugró értesítési sáv CSS3 segítségével

A HTML 5/CSS 3 webdesign segédletből megtanulhatjuk a megjeleníthető és elrejthető értesítési sáv egyszerű elkészítését.

CSS konvertálása SASS és SCCS formátumba

A SASS és SCCS a legtöbb designer, webdesigner számára új. Ez a tutorial bemutatja, hogyan konvertáljunk CSS-ből SASS, illetve SCCS formátumba.

Google Maps szerkesztése

Térkép hozzáadása a weboldaladhoz nagyszerű dolog, ebből a tutoriálból elsajátíthatod a térkép szerkesztését, s akkor nem kényszerülsz arra, hogy tudás híján a konkurencia oldaláról kelljen ellopnod! Különösen ajánlott ez a cikk, ha nem nálunk, hanem másolós iskolában tanultál webdesignt!

A Google Maps API kreatív felhasználása

A webdesigner egyik fő feladata lenyűgözni az ügyfeleket. Google Maps lehetővé teszi, hogy a sablon térképeken túl olyan egyéni, személyre szabott grafikát jelenítsünk meg a weboldalba ágyazott térképen, amelyek illeszkednek a weboldalon kialakított dizájnhoz.

Egyenlő oszlopmagasság CSS-ben

Kezdő webdesigner számára nem könnyű feladat az egyenlő oszlopmagasság beállítása, és sajnos ez később sem lesz egyszerű… Persze, csak tréfálunk, ebből a segédletből megtanulhatod, hogyan lehet egyszerű eszközökkel pontos eredményt elérni a webdesign tervezés során!

Web alapú videó lejátszó létrehozása

Abban a legtöbb webdesigner, programozó, sitebuilder egyetért, ha korábbi verzióiban valahol gyengén teljesített a HTML nyelv, akkor az a videó és audio támogatás volt. Gyakorlatilag olyan böngészőbe ágyazott külső programokra voltunk kénytelenek támaszkodni, mint például a Flash vagy a Silverlight. A HTML5 natív módon, külső segítség nélkül támogatja a

Több háttér használata CSS3-ban

Háttérkép hozzáadása egy HTML objektumhoz nem kihívás, hanem alapfeladat volt a CSS korábbi verzióiban is. A CSS3 újdonsága a webdesignerek számára, hogy a Photoshop réteghasználatához hasonlóan lehetőségünk nyílik több képből egyszerre kialakítani az adott HTML objektum hátterét, lehetővé téve összetettebb animációk létrehozását.

Tartalomfül készítése Pure CSS-ben

Tartalomfülek készítéséhez korábban Java Script alapú kódokat kellett használnunk. A CSS3 segítségével ezekre többé nincs szükség, létrehozhatunk pusztán CSS segítségével ilyen interaktív elemeket weboldalunk számára.

Keresőmezővel rendelkező legördülő menü készítése CSS3-ban és HTML-ben

A segédlet az egyszerű és elegáns Flat Design stílusú legördülő menü létrehozását mutatja be. Nagyon hasznos lehet azoknál a webes projekteknél, webdesignoknál amikor a dizájner, webdesigner egy webprogramozóval dolgozik együtt, és a feladatok közé tartozik űrlapelemek tervezése is.

Hogyan készítsünk Flat Style morzsa linkeket CSS-ben

Flat Style morzsa linkek készítése CSS-ben

Lemonade Responsive Grid System

Lemonade egy olyan rácsszerkezet (Grid System), amely segít a designereknek, webdesignernek és a webfejlesztőknek responsive webdesign létrehozásában.

HTML Email sablon az alapoktól

Ebből a segédletből megtudhatod, hogyan készíts látványos email sablonokat HTML és CSS segítségével.

Circle Navigation Effect with CSS3

Egy újabb minőségi tutorial, amelynek segítségével érdekes navigációs effektek készíthetők a webdesign során.

Blur Menu CSS3 átmenettel

Korábbi Flash oldalakról ismerős effekt, a CSS3 újdonságainak hála, mostantól tisztán HTML, CSS kóddal megvalósítható ez a fajta navigációs effekt a webdesign készítésekor.

Űrlap formázás CSS3 segítségével

Ez a tutorial egyaránt hasznos a webdesigner és a webfejlesztő számára. Letisztult, egyszerű űrlap készítése tanulható meg CSS3 segítségével.

jQuery

Hogyan alkalmazzunk végtelen oldal görgetés effektet statikus weboldalakon

Az egyik legismertebb, Facebook által is használt szolgáltatás a végtelen görgetés. Sajnos a webdesign tanfolyami anyagba ritkán fér bele, de ennek a tutorialnak a segítségével könnyen elkészíthető lesz.

Interaktív 3D objektum jQuery segítségével

Néhány évvel ezelőtt az interaktív, forgatható, méretezhető 3D objektumok megjelenítése csak Java programozók kiváltsága volt. Akkor még nem is sejtettük, hogy néhány év múlva szinte mindennapi rutin webdesign feladat lesz egy ilyen elkészítése.

jQuery Immersive Slider készítése

A sliderek még mindig fontos és kedvelt eszközök a modern web dizájnban. Kreatív és egyszerű megoldást kínál az alábbi segédlet.

Görgetős weboldal a Jarallax.js használatával

Parallax Scrolling egy nagyon érdekes és látványos technológia, amelynek segítségével általában történeteket mesélnek el a weboldalakon, de bizonyára hasznos lehet a kereskedelmi weboldalak esetében is.

Szuper egyszerű szövegelforgatás szinte erőlködés nélkül

Szöveg forgatása soha nem volt ilyen egyszerű, mint ennek a webdesign tutorialnak a segítségével!

ChartJS Basic tutorial

A tutorial a Chart JS használatát mutatja be, különböző effektekkel díszített, látványos diagramok készíthetők segítségével.

 

Vissza design, grafika és webdesign cikkekhez