Vytváříme pozadí pro webovské stránky - Grafika.cz - vše o počítačové grafice

Fotosoutěže
Fotogalerie
Rubriky
Odběr fotomagazínu

Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!

 

Zadejte Vaši e-mailovou adresu:

Kamarád fotí rád?

Přihlas ho k odběru fotomagazínu!

 

Zadejte e-mailovou adresu kamaráda:

Nabídka práce
Poptávka práce


Photoshop

Vytváříme pozadí pro webovské stránky

13. října 1999, 00.00 | Předvedeme si dva Photoshop postupy, kterak v pár krocích vytvořit efektní pozadí pro vaše webovské stránky.

V dnešním Photoshop postupu se budeme zabývat vytvářením pozadí pro webovské stránky. Zaměříme se na pozadí vytvářející dojem různě vyhlížejících sloupců, které jsou většinou v levé části stránky a vytváří zde podklad například pro tlačítka či textové odkazy.
Doufám, že teď už máte představu o tom, co mám na mysli (pokud přece ne, tak podotýkám, že se nebude jednat o vytváření různých textur apod.).

Jakýmsi současným standardem v používaném rozlišení monitorů je 800x600 bodů. Z toho plyne, že obrázek (proužek) pro pozadí by měl mít šířku min. 800 pixelů, aby se nám nestalo, že se levá část obrázku objeví i v pravé části obrazovky. Užší obrázek můžeme vytvářet za předpokladu, že bude použit jako pozadí pro rám (frame) stránky. Pak závisí šířka obrázku na šířce rámu deklarované v HTML kódu. Já osobně dávám přednost právě rámům, odpadá tak nutnost dávat vlastní text (a jiné objekty) stránky do tabulky nebo jej odsazovat. Tolik k zákonitostem pozadí webovských stránek.

Pojďme na vlastní postupy…

Zubatý okraj

  1. vytvoříme nový soubor velikosti 800x60 obr. bodů
  2. barvu popředí nastavíme na takovou jaký má být levý zubatý "sloupec" (zde modrá)
    3. čára
  3. použijeme nástroj Čára a vedeme ji v úhlu cca 45 stupňů, tak aby se dotkla horní i dolní hrany obrázku (viz obr)
  4. použijeme nástroj Plechovka a levou část obrázku (po rozdělení čárou) vyplníme barvou nastavenou jako popředí
  5. vybereme Vrstva => Duplikovat vrstvu
  6. vybereme Vrstva => Transformovat => Převrátit svisle
  7. vybereme Vrstva => Sloučit viditelné
  8. vybereme Vrstva => Duplikovat vrstvu
  9. vybereme Obraz => Přizpůsobit => Odstín a sytost
    - nastavíme Sytost: -100, Svě    tlost: +15
  10. vybereme Filtr => Rozostření => Gaussovské - nastavíme 3 obr. body
  11. rozostřenou vrstvu přesuneme (pomocí paletky Vrstvy) pod původní vrstvu (pokud paletku Vrstvy nevidíme - vybereme Okna => Vrstvy)
  12. použijeme nástroj Přesun spolu s přidržením shiftu a tuto rozostřenou posuneme horizontálně dle uvážení (čím více, tím více bude stín vyčnívat)
  13. vybereme Vrstva => Do jedné vrstvy.

Výsledek práce je zde.

 

"Warning" okraj

  1. vytvoříme nový soubor 100x50 pixelů
  2. barvu popředí nastavíme na černou
  3. použijeme nástroj Čára a vedeme ji v úhlu cca 45 stupňů, tak aby se dotkla horní i dolní hrany obrázku (viz obr)
  4. použijeme nástroj Plechovka a levou část obrázku (po rozdělení čárou) vyplníme barvou nastavenou jako popředí
  5. vybereme Obraz => Velikost plátna - nastavíme Výška: 100 obr. bodů, Ukotvení: dolů
  6. vybereme Vrstva => Duplikovat vrstvu
  7. vybereme Vrstva => Transformovat => Otočit o 180°
  8. otočenou vrstvu posuneme tak, aby žluté plochy obou vrstev přesně dotýkaly - Použijeme nástroj Přesun spolu s držením shiftu
  9. vybereme Vrstva => Sloučit viditelné
  10. vybereme Obraz => Velikost plátna - nastavíme Šířka: 800 obr. bodů, Ukotvení: vlevo
  11. vybereme Vrstva => Do jedné vrstvy

Výsledek práce je zde.

Na shledanou příště (možná u dalších pozadí)…

 

Tématické zařazení:

 » Rubriky  » Webdesign  

 » Rubriky  » Photoshop  

Poslat článek Diskuse (0) Tisk Přečteno: 758x

www.grafika.cz/rubriky/photoshop/vytvarime-pozadi-pro-webovske-stranky-127149cz

 

 

 

Nejčtenější články
Nejlépe hodnocené články
Nabídka bazar

 

Přihlášení k mému účtu

Uživatelské jméno:

Heslo: