7 Photoshop Tipy pro navrhování čistých a moderních webových stránek
Čistý, elegantní a krásný webový design je často záležitostí osobní perspektivy. Podívám se na stovky webových stránek každý týden, a několik z nich se mi zdá, ale ne všechny jsou nutně účinné.
Příliš často designéři varí koncept příliš daleko, což produkuje konečný design, který není nic víc než text a mřížka. Zatímco tyto minimální vzory mají estetický vzhled, zvláště když jsou spárovány s vynikající typografií, riskují, že nedosáhnou pozornosti.
Osobní názory stranou, existují určité rysy designu, které umožňují, aby byl hrdě označen jako čistý nebo moderní a zvýšil jeho použitelnost a přeměnu na univerzální úrovni. Jednoduchost není trend designu, ale spíše atribut dobrého designu.
Photoshop nám poskytuje všestrannou sadu nástrojů pro vytváření hloubky a zájmu a vyzývá nás k integraci jemných detailů, kde bychom nechali prázdný prostor. Potřebujete jen hrstku těchto nástrojů, abyste vkládali vlastnosti moderního designu do rozvržení. Tím, že je zvládnete, můžete vytvořit čisté návrhy, které jasně a efektivně vyjadřují funkčnost.
1. Prostor
Bílý prostor umožňuje vizuální oddělení konstrukčních prvků bez použití krabic, linií nebo další grafiky a je možná nejdůležitějším aspektem moderního designu. Pro prezentaci obsahu a čitelnost je zásadní. Při správném použití poskytuje bílý prostor své uspořádání čistý a elegantní pocit.
Vodítka a mřížky jsou k dispozici ve Photoshopu, které vám pomohou přesně umístit prvky. Mřížka překrývá celý dokument, zatímco vodítka mohou být nastavena ručně. Chcete-li nastavit neviditelné hranice, okraje a polstrování, které se používají k definování bílého místa, použijte pokyny dříve.
Vytvoření průvodce stisknutím kláves Ctrl + R (Win) nebo Cmd + R (Mac) povolíte pravítko a poté klepnutím na pravé nebo pravé pravítko přetáhněte vodítko do požadované pozice. Zde jsou některé další zkratky, které vám pomohou spravovat průvodce při práci:
- Chcete-li přesunout vodítko: Ctrl (Win) nebo Cmd (Mac) a klepněte na vodítko
- Zobrazit / skrýt průvodci: Hit Ctrl +; (Win) nebo Cmd +; (Mac)
- Zobrazit / skrýt mřížku: Hit Ctrl + '(Win) nebo Cmd +' (Mac)
Povolte inteligentní průvodci v části Zobrazení> Zobrazit> Inteligentní průvodce . Inteligentní vodítka se automaticky zobrazují při kreslení tvaru, zarovnání textu nebo vytvoření výběru nebo snímku a ušetříte tak práci s nastavením pokynů pro tyto prvky předem.
Zarovnání objektů pomocí vodítek a mřížky usnadňuje strávení vašeho návrhu a celkový výsledek bude mít více leštěný vzhled.
2. Hloubka
Hloubka vytvořená světlem a stínem činí vaše prvky vypadaly ostré a skutečné. Stínové efekty lze aplikovat na libovolnou objektovou, výběrovou nebo textovou vrstvu, ale trikem je vybrat barvu, která odpovídá pozadí a vynechá výchozí černý.
Ne všechny stíny musí být tmavé. Kombinujte efekt Vnitřní stín s bílým nebo světlým odstínem Stropu, který vytvoří potlačený nebo "knížkový" pocit s textovými nebo formulářovými poli.
3. Detail
Funkce gradientu i gradientové vrstvy hrají velkou roli v čistém a moderním designu. Přechody jsou přítomny v každém aspektu moderního stylingu, od stínů a světel až po pozadí a tlačítka.
Chcete-li získat přístup k nástroji pro přechody, stiskněte klávesy Shift + G. Chcete-li vytvořit přechod, klepněte na plátno, přetáhněte a uvolněte. Tento nástroj se nejlépe používá pro velké plochy, jako jsou pozadí, světla nebo radiální stíny. Při práci s jednotlivými prvky, například sekcemi, tlačítky nebo ikonami, efekt vrstvy překryvného gradientu je účinnějším prostředkem pro vytváření stylů povrchu nebo textur. Tento nástroj je dostupný dvojitým kliknutím na vrstvu prvků a zaškrtnutím políčka Překryvný gradient.
Použijte tento efekt pro jemné rozměry tlačítek a navigačních panelů nebo pro napodobení stylu a struktury papíru nebo kovů.
4. Definice
Nadměrnými hranami a hranicemi zajistíte, že vaše prvky mají správný kontrast.
Efekt vrstvy Stroke načrtne prvky, jako je text nebo tlačítka, kde potřebujete rovnoměrně vyvážený obrys na všech stranách. Pomocí tohoto efektu uvolníte stíny Vnitřní a Střídavý, abyste rozšířili své možnosti.
Je lákavé k tomu, aby se nástroj pera natočil do přímých linek a horizontálních pravidel, ale pokud chcete použít linie nebo stíny na čáru, je jednodušší použít nástroj Single Row Marquee, který je zastrčený diskrétně za nástrojem Rectangular Marquee Tool . Použijte nástroj Jednoduchý řádek na novou vrstvu a bílý nebo světlý stín stínu, abyste vytvořili zvýrazněné čáry podél okrajů nebo oddělovačů částí, kde není možné použít efekt na samotný prvek.
5. Úrok
Čisté a moderní není nutné rovnat se nudné, bílé nebo minimální. Chytré používání struktury a vzoru vám ukáže, že váš design vynikne, a zároveň komunikuje styl a značka. Pomocí jemných technik, jako je přidávání šumu (Filtr> Přidání šumu) nebo efektu vrstvy Překryvná textura na pozadí nebo prvky rozhraní, použijte jemné techniky, které vám pomohou rozdělit je. Čím je reálnější a jasnější prvek, tím víc je lákavější pro diváka.
6. Perspektiva
Perspektiva je nejvíce nevyužitou technikou v moderním návrhu webových stránek jednoduše proto, že probíhající trendy se důsledně soustředí na symetrii a sítě. Aplikací perspektivy na obrazy a prvky ve vašem designu můžete v jednom jednoduchém kroku představit hloubku, rozměr, modernismus a zájem o svůj design.
Perspektiva může být udělena libovolnému tvaru nebo obrazu výběrem volby "Volná trasa transformace" v nabídce s pravým tlačítkem myši a klepnutím na tlačítko "Warp" umístěné na liště možností nástroje.
Iluze perspektivy může být také vytvořena vytvořením asymetrických tvarů nebo rámců a pomocí gradientů a stínů vhodně umístit předměty od sebe.
7. Čitelnost
Silný typ je v komunitě návrhářů velmi milován a ještě silnější součást čistého designu. Může nahradit snímky a grafiku, které by jinak mohly zkomplikovat design a zprostředkovat jednoduchou a přímočarou souhrnnou podstatu výše uvedených postupů.
Chcete-li přidat texty do textu, převeďte textovou vrstvu na inteligentní objekt nejprve pravým klepnutím na vrstvu a výběrem položky "Převést na inteligentní objekt". Jste omezeni na efekty vrstvy ve výchozím nastavení, pokud váš text není rasterizován, praxe, kterou chcete vyhnout, i při návrhu na obrazovku. Převedení na funkce Inteligentní objekty umožňuje použít filmy a další techniky k textu a současně zachovat možnosti úprav v případě, že potřebujete změnit později text.
Nezapomeňte, že při nastavování textových prvků máte k dispozici možnosti sledování a kernování. Dokonce i když je váš text určen k reprodukci v CSS, měli byste časně experimentovat s roztečí řádků a písmen, abyste lépe vizualizovali, jak se bude váš obsah zobrazovat v prostoru, který jste mu zadali. Také nezapomeňte použít text "Crisp" nebo "Sharp" pro zachování definice a jasnosti.
Jak předvádíte svůj obsah v čistém designu je důležitější než jakýkoli jiný styl, jednoduše proto, že vizuálně dochází k menšímu rozptýlení diváků. Využíváním výše uvedených tipů vhodným způsobem pro přidání textu a objektů, přidání definice a zájmů a nastavení obsahu mimo rozhraní, váš návrh dosáhne optimální efektivity.
Co si myslíte o těchto tipy a máte jiné, které používáte pravidelně? Podělte se prosím níže ...