Elements of Retro Web Design

Vintage a retro styl je stále více populární v dnešní digitální umělecké dílo.

Použití retro a vintage motivů v designu je pravděpodobně jeden z nejrozšířenějších trendů, protože průmysl šel téměř úplně digitální.

V dnešním příspěvku se podíváme na příklady prací pocházejících z nádherné práce Dribbble , což nám pomáhá zaměřit se na úryvky kusu spíše než na celý návrh nebo ilustrace.

Odtud je možné určit, jaké techniky byly použity, a popsat, jak mají vliv na celkový design. Budete se seznámit s těmito trendy vývoje a budete je moci replikovat.

Chcete-li vám pomoci, krátké výukové programy jsou rozptýleny v celém článku. Navrhujeme také několik dalších užitečných cvičení a zdrojů, které vám pomohou začít s vlastním vinobraní a retro prací!

1. Kruhy a jiné jednoduché tvary

Jednoduché tvary se běžně používají v ročníku designu. Kruhy jsou nejběžnější, zejména v oblasti brandingu. Níže uvedené příklady byly pečlivě vybrány, aby vám ukázaly, jak silné jsou jednoduché tvary.

str

Tato krásná ilustrace využívá eliptické tvary, které produkují slunce, a je pěkně dokončena s typografickým účinkem.

Logo značky Circlebox Creative je založeno na kruhu a je inspirováno vinobraní razítky a odznaky. Návrh je okouzlen s květinovými vzory a jednoduchým typografickým stylingem.

Tento design je poněkud jiný, protože se spoléhá těžko na jednoduché tvary, aby to pop. Záhlaví modré lišty používá dlouhý řádek malých kruhů pro vytvoření zajímavého spodního okraje.

Tento ročník design, stejně jako značka značky Circlebox Creative, je inspirován vinobraní razítky a odznaky. Identita vypadá, jako by byla skutečně vyražena na kus papíru, na rozdíl od hladkých a čistých linek společnosti Circlebox.

Zde je další značka založená na kruhu. Textura a modrá ze všech šedých skutečně přinášejí tento design do života.

Neuvěřitelně jednoduchý kus práce, který se skládá ze dvou kruhů, textury, některých stylů míchání a čisté typografie. Tento kus skutečně ukazuje sílu jednoduchých tvarů.

Mini-tutoriály

Jak aplikovat květinový vzor Damašku na kruh pomocí aplikace Adobe Illustrator

Použití vzorku v kruhu v aplikaci Illustrator je něco, co pravděpodobně uděláte hodně, pokud prozkoumáte retro trend. Technika je podobná tomu, co Glace dorty dělají pro své branding (viz výše).

Otevřete Illustrator a nakreslete kruh. Podržte klávesu Shift, když přetáhnete kruhovou kolečku, abyste ji drželi kolem. Vložte svůj damask květinový vzor tím, že přejdete do Soubor → Umístění.

Odstraňte pozadí a změňte barvu nově umístěného vzoru. Jednotlivé položky můžete vybrat pomocí nástroje přímého výběru.

Vyberte vzorek pomocí nástroje Výběr a přejděte do okna → Pathfinder a otevřete okno Pathfinder, pokud jste to ještě neučinili. Podržte klávesu Shift a vyberte svůj kruh a současně vyberte obě položky. Klepnutím na tlačítko Minus Front v okně Pathfinder odstraňte květinový vzorek, který leží mimo kruh. Zahrajte si s výběrem barev a skončíte!

Vytváření bublinové čáry pomocí aplikace Adobe Photoshop

Vytvořme bublinkovitou čáru jako v příkladu výše.

Pomocí nástroje pravoúhlého výběžku přetáhněte výběr a vyplňte ho černým na novou vrstvu. Vyberte nástroj s eliptickým výběrem a podržením klávesy Shift přetáhněte velmi malý výběr a naplňte ho černě, opět na novou vrstvu.

Umístěte černý kruh na spodní část černého obdélníku. Duplikujte vrstvu a umístěte nový kruh vedle vašeho originálu.

Opakujte tento krok, dokud nemáte něco, co vypadá jako následující obrázek. Budete mít spoustu vrstev. Vyberte všechny z nich a současně podržte klávesu Shift a přejděte do vrstvy Layer → Merge Layers, čímž je změníte na jednu.

Nyní přidáme některé jednoduché vrstvové styly nebo možnosti prolnutí, aby se náš tvar oživil! Klepněte pravým tlačítkem na vaši vrstvu a vyberte možnost "Možnosti kombinace." Okno Styl vrstvy by se mělo otevřít. Použijte následující efekty pro přidání přechodu, vnitřního stínu a stínu:

A skončili jsme!

2. Dvoubarevné a omezené barevné schémata

Dvoubarevné barevné schémata jsou velkou věcí ve vintage designu, neboť produkce plnofarebných výtisků nebylo tak snadné jako v dnešní době. Níže uvádíme několik nedávných příkladů dvoubarevných a omezených barevných schémat.

Tento minimalistický design získává svou vizuální přitažlivost od černobílých tvarů a linií, zejména z horizontální čárkované čáry a výřezu tvarů ze spodní části kruhu.

Tato značka opakuje několik vybraných barev. Barvy fungují neuvěřitelně dobře. Žlutooranžová je ohnisková barva, která vás upoutá vaší pozorností.

Tento krásný kus retro designu se opírá pouze o barvu a typografii. Tenké jemné řádky o jednom pixelu to dokončují.

Další dvoubarevný černobílý design. Tato identita je založena na odznaku a získává trochu trojrozměrný vzhled z jednoduché typografie a efektů.

Tento příklad skutečně ukazuje, jak efektivní barva může být. Používá tři barvy: oranžová, hnědá a bílá. Kontrast mezi třemi vzorky funguje velmi dobře pro návrh.

Tento návrh (samotná identita, nikoliv pozadí) se opírá pouze o barvu a typografii.

Tento design kombinuje oranžovou a pěknou modrozelenou barvu s bílým. Kombinace barev odpovídá okrajovým okrajům a jednoduchým typografickým efektům.

Ještě další vintage typografické logo, které se opírá o dvě barvy: bílý typ na červeném. Všimněte si, jak je identita založena na kruhu.

Tato identita používá pouze tři barvy, elegantní písmo a příjemný míchací režim, který dává námrazu na dort.

Zdroje barev

Spousta skvělých aplikací vám pomůže vytvořit vlastní barevné schémata. Tento malý výběr sdílí některé z nejlepších:

ColourLovers (webová aplikace)
Krásná stránka věnovaná barevným schématům. Procházejte stávajícími tématy vytvořenými komunitou nebo si vytvořte své vlastní od začátku nahráváním fotografií.
Voliéra Toucan (webová aplikace)
Další webové aplikace, ale bez komunitní podpory jako ColourLovers. Tato aplikace umožňuje vytvářet barevné schémata od nuly nebo importovaných obrázků.
Adobe Kuler (webová aplikace)
Ještě další webová aplikace pro správu barev, kterou tentokrát přinesl stále oblíbenější Adobe. Rozhraní je ohromující a snadno se používá. Kuler hostí komunitu a můžete procházet nejlépe hodnocené barevné schémata.
Barevný proud (iPhone app)
Tato aplikace iPhone umožňuje vytvářet a ukládat barevné palety od začátku nebo z importované fotografie. Můžete také auto-generovat schémata z fotografií pomocí vestavěného barevné schématu.
Palety (iPhone app)
Palety jsou podobné technologii Color Stream, která vám umožňuje vytvářet a ukládat barevné schémata na cestách od začátku nebo od obrazu. Můžete také uchopit barvy z vašeho oblíbeného webu.

Jste-li nováček, je zde několik článků, které stojí za to se podívat: " Výběr barevných kombinací " a " Teorie barev pro návrháře, část 3: Vytvoření vlastních barevných palet . "

3. Typografické prvky a trendy

Typografie je jedním z nejdůležitějších prvků v retro digitálním designu. Existují nekonečné možnosti typového návrhu, z nichž některé lze nalézt v níže uvedených příkladech.

Tento úryvek typového návrhu je plný textu s dobrou povahou. Text je ukončen stínovým stínem a jednoduchým, ale opravdu úžasným vzorem s úhlopříčkou jednoho pixelu.

Tady je můj osobní oblíbený typografický kus v této vitríně. Spojí některé vynikající vintage styly s moderními technikami. Tento typ je oživený přidáním jemných detailů, jako je například bílá tahová barva s jedním pixelem na řádku "Jste srdečně zváni" a stále důležitější stíny pro typ dat.

Tato retro typografie odhaluje překvapivě jednoduché techniky. Typ "Návrh je" se třikrát zdvojnásobí a přemístí. Spodní duplikát je pak texturovaný, aby vytvořil krásný retro styl v několika minutách.

Ještě víc typografie, která využívá jednoduchý stín pro přidání hloubky k elegantnímu dekorativnímu písmu.

Jednoduchá typografie kombinovaná s poloprůhlednými tvary a jemnou strukturou. Návrh se sluší.

Nemůžete být mnohem jednodušší než toto: silný výběr písma.

Tato trojrozměrná typografie byla s největší pravděpodobností dokončena v Illustratoru, kde se používají 3-D nástroje. K designu byl přidán jemný šum, který funguje dobře s omezeným barevným schématem.

Tento skvělý malý snímek digitálně vyrobeného retro designu kombinuje texturu, šum, jednoduché tvary, různé styly míchání a skvělou barevnou schématu. Typografie, obzvláště větší typ, je přivedena k životu ostrými stíny.

Tento impozantní kus kancelářského papíru inspirovaného ročníkem využívá ručně kreslených prvků pro svůj vzhled. Návrh má také omezenou barevnou schématu.

Bílá typografie v tomto designu byla sloučena s obrazem, jako kdyby byla při fotografování. Sépiová fotografie funguje dobře.

Mini-tutoriály

Jak vytvořit kresbu ručně kreslenou pomocí Adobe, Photoshopu nebo Illustratoru

V tomto krátkém tutoriálu se dozvíte, jak rychle vytvářet, skenovat a vektorizovat ručně kreslený typ pomocí Adobe Photoshopu a Illustratoru.

Nejprve nakreslete několik písmen:

Musíte svůj náčrt nějakým způsobem vyplnit. Můžete to udělat pomocí barvy nebo značky. Používám černý indický inkoust a jemný štětec, který velmi doporučuji, hlavně proto, že je tak čistý a odvážný.

Začněte vyplňovat vaše nakreslené čáry.

Měli byste skončit s něčím, co vypadá takto.

Poté skenujte obrázek. Pokud nevlastníte skener, stačí fotografovat práci - prostě se ujistěte, že je to vysoká kvalita. Po naskenování nebo fotografování snímku otevřete nový soubor aplikace Photoshop a přejděte do Soubor → Umístění; vyhledejte obrázek a vložte jej do dokumentu.

Přejděte na položku Image → Adjustments → Brightness / Contrast. Zvýrazněte úroveň kontrastu přibližně na 50. Tím se ztmavne černá barva v obraze.

Uložte soubor jako obrázek a otevřete aplikaci Adobe Illustrator. Vytvořte nový soubor RGB a pak přejděte na Soubor → Umístění. Najděte nově uložený obrázek a umístěte jej na plátno. Na panelu nabídek v horní části plátna vyberte možnost Live Trace. Váš text je nyní pracovním vektorem a lze ho libovolně měnit podle libosti, aby se použil ve vašich dokumentech Photoshopu.

Jak přidat typografii k městské fotografii pomocí aplikace Adobe Photoshop

Přidáme typografii na fotografii pomocí techniky podobného té, kterou jsme použili pro fotografii z Amsterdamu. Pro účely tohoto cvičení budeme používat tato fotografie Barcelony .

Zkopírujte fotografii a vytvořte nový dokument aplikace Photoshop. Vložte fotografii do dokumentu. Zvolte nástroj Text a zadejte "Barcelona" na typ písma, který jste si vybrali. Přejděte na položku Upravit → Transformovat → Otočit a natočte typografii pod úhlem tak, aby se zhruba vyrovnala úhlu budov.

Všimnete si, že některé písmena nepřekrývají budovy. Chcete-li to vyřešit, vyberte nástroj Pen a manuálně roztáhněte spodní část písmen tak, že na ně vytvoříte nové tvary. Jakmile to uděláte, klikněte pravým tlačítkem myši a vyberte možnost "Vyplnit cestu". Vyplňte výběr černou barvou.

Dále odstraňte překrývající se oblasti svého typu. Znovu použijte nástroj Pen, abyste vytvořili výběr. Přibližte se přímo do vaší fotografie a vydejte se kolem budovy a stromu. Jakmile to uděláte, klepněte pravým tlačítkem myši a přejděte na položku "Vybrat výběr". Nyní byste měli mít pohybovanou přerušovanou čáru, jako je následující:

Klepněte pravým tlačítkem myši na typografickou vrstvu a vyberte možnost "Rasterize Type" (Typ rozmazání). To změní z vrstvy typu na standardní vrstvu. Slouží ke sloučení vrstvy typu s vlastním tvarem, který jsme vytvořili dříve, a to výběrem všech, zatímco držíme klávesu Shift a přejeme do vrstvy Layer → Merge Layers. Výběr, který jsme provedli v posledním kroku s nástrojem Pen, by měl být stále aktivní. S vybranou vrstvou jednoho typu stiskněte klávesu Delete. Tím by měl být odstraněn veškerý překrývající se text.

Nyní je čas, aby některé velmi jednoduché úpravy fotografií sloučily váš typ trochu lépe. Vyberte vrstvu pozadí (kterou by měla být vaše fotografie) a přejděte do nabídky Image → Adjustments → Desaturate, čímž změníte svou fotografii na odstíny šedé / černobílé. Nyní přejděte do nabídky Image → Adjustments → Photo Filter. V rozbalovací nabídce vyberte možnost sépiové a nastavte intenzitu efektu pomocí posuvníku úrovně. Vybral jsem si asi 60%.

Klepněte pravým tlačítkem myši na typovou vrstvu a v nabídce vyberte možnost "Možnosti sbalení". Použijte barvu na svůj typ; Používala jsem světle hnědou barvu. Zde je můj výsledek:

Jak aplikovat stínový vzhled a překryvný vzor k typografii pomocí aplikace Adobe Photoshop

V tomto krátkém výukovém programu vytvoříme jednoduchou typografii pomocí vestavěných efektů aplikace Photoshop. Budeme také vytvářet vlastní vzor.

Nejdříve si založte náš jednoduchý vzor. Otevřete nový dokument aplikace Photoshop, který je 3 ÷ 3 pixely. Nyní vyberte nástroj Tužka. Přibližte přímo do plátna a pomocí černé # 000000 umístěte tři pláty diagonálně na plátně, jak je vidět níže:

Přejděte na položku Upravit → Definovat vzorek a vyvolejte následující pole pole. Zavolejte svým vzorem něco vhodného (nazval jsem můj "Diag Line 1"). Stiskněte tlačítko "OK". Váš vzor je hotový!

Vytvořte další nový dokument aplikace Photoshop. Naplňte pozadí světelnou barvou dle vašeho výběru a přidejte na plátno nějakou typografii. Použité písma jsou Helvetica Neue Medium a Helvetica Neue Bold.

Znovu vyberte text a změňte jeho barvu. Vyberte něco, co kontrastuje s pozadím. Je důležité nastavit barvu textu namísto použití překrytí barev, protože později použijeme vzorek vzoru a bohužel nemůžete použít obě.

Klepněte pravým tlačítkem myši na typovou vrstvu a vyberte možnost "Blending options" pro otevření okna Style Layer. Zvolte možnost "Pattern Overlay" a v rozevíracím rámečku vzor vyberte vzor, který jsme vytvořili dříve. Změňte režim přechodu na "překryv" a opacitu na 30%. Výsledky se budou lišit v závislosti na výběru barvy, takže neváhejte experimentovat.

Nyní použijeme vnitřní stín. Použijte nastavení zobrazená na následujícím snímku obrazovky:

Nyní použijte velmi slabý, ale důležitý drop-shadow. Věnovat pozornost malým detailům vždy stojí za to. Použijte podobné nastavení, jaké vidíte na obrazovce obrazovky níže:

Chcete-li dokončit typografii, zkopírujeme celý text. Klepněte pravým tlačítkem myši na typovou vrstvu a vyberte možnost Duplicate layer (Duplikovat vrstvu). Vyberte nástroj Move (Přesunout), přesuňte typ jinde v dokumentu a přemístěte jej pod původní typovou vrstvu. Snižte opacitu a jste hotovi.

4. Míchání stylů

Blending Styles (obvykle označované jako Režim míchání ve Photoshopu a Illustratoru) je skvělý způsob, jak přidat rozměr do své práce bez velkého úsilí. Umožňuje kombinovat objekty a barvy dohromady několika různými způsoby. Režimy kombinace se často používají s různou úrovní opacity; například při aplikaci fotografické textury na obrázek, o kterém budeme diskutovat později.

Zdá se, že v této značce existují tři tvary, ale ve skutečnosti jsou jen dvě: modrá a červená. Režim míchání byl aplikován na tvary, což umožnilo zobrazení texturovaného pozadí, promíchání barev a vytvoření živého tmavě fialového.

Tento malý kus je plný různých míchacích režimů, textur, fotografií a jednoduchých tvarů, což vede k silné práci.

Tento krásný kus práce opakuje jednoduché tvary a používá různé míchací módy, aby každý tvar jedinečný. Na typografii byly také použity míchací režimy.

Dvě kruhy v tomto designu mají různé způsoby míchání aplikované na ně, z nichž jeden projevuje červený odstín na obrázek pod ním, druhý z nich mění obraz pod tmavě červenou barvou a oba umožňují texturu projít. Vytvoří se živá červená barva, kde se oba tvary setkávají.

Tento kus Open Yoga Gallery je jedním z mých oblíbených ve vitríně. Kombinuje měkkou a omezenou barevnou schématu s fotografií a poté přidává šum, lehkou texturu a stylovou typografii.

Fotografie v tomto díle mohou být vyrobeny překrytím celé fotografie v plné barvě a změnou režimu míchání této vrstvy, což způsobí, že obraz pod ní vypadá vybledlý a opotřebovaný.

Tento kus je plný textury. Režim přebalení byl aplikován na každou strukturu, aby se obraz pod ním ukázal.

Podobně jako v Itálii jsme viděli, že tato fotografie byla manipulována pomocí vrstvy plné barvy s míchacím módem. Styl má vrstvu různých barevných polotovarů, nejspíše s aplikovaným míchacím režimem Overlay a se sníženou průhledností.

Kruh uprostřed tohoto dílu má na něj přiřazený míchací režim, který umožňuje zobrazení pozadí.

Mini-tutoriály

Jak kombinovat barvy s fotografiemi pomocí aplikace Adobe Photoshop

V tomto mini-tutoriálu použijeme barvu na černobílou fotografii pomocí nástroje Brush a míchání. Budu používat tato pavučina fotografie .

Otevřete nový dokument aplikace Photoshop a na plátno umístěte fotografii podle vašeho výběru. Dal jsem můj bílý okraj.

Vyberte měkký kartáč a barvu světla. Zvolil jsem žlutý pastel. Vytvořte novou vrstvu tím, že přejdete do vrstvy → Nová vrstva. Nalejte velký nádech své barvy na novou vrstvu, jak je vidět zde:

Opakujte proces s více barvami. Tyto barvy můžete namalovat na stejnou vrstvu - není potřeba vytvářet nové vrstvy.

str

Jakmile dokončíte barvení vrstvy, přejděte na Filtr → Blur → Gaussian Blur. Zrušte vrstvu, abyste tyto barvy trochu spojili. Cokoliv přesahující 100 pixelů by mělo být v pořádku, ale záleží na velikosti vašeho plátna: čím větší plátno, tím více pixelů budete muset rozmazat.

Nyní můžeme změnit míchací režim vrstvy. V rozbalovací nabídce režimu míchání v paletě vrstev vyberte možnost "Překrýt."

Snižte opacitu barvené vrstvy na přibližně 50%. Měli byste skončit s tímto:

Experiment je klíčový; každý režim míchání změní konečný produkt, což znamená, že nikdy nebudete schopni reprodukovat výsledek. Níže uvedený příklad používá obrazovku míchání, která vypaluje fotografii a vypadá zpět. Experimentování s takovými efekty je typické, jak jsou reprodukovány retro efekty Lomo a Holga.

Zdroje

Níže je malý výběr starožitných výukových plakátů, které využívají styly míchání:

5. Textura a hluk

Textury a hluk přinášejí vaší práci vizuální zájem. V některých případech design vypadá prostě bez nich. V jiných případech může být struktura a hluk příliš mnoho. Níže je několik příkladů retro vzory, které dobře fungují s texturami.

V tomto díle se používá fotografická struktura ve stylu plátna, která dává celkovému vzhledu krásný opotřebovaný vzhled.

Tato čistá textura nakonec vytváří čistý design. Retro vzhled se dosahuje lehkým grungeovým kartáčem pro odstranění některých oblastí loga a typografie.

Textura papíru byla v tomto kusu používána příliš, aby vznikla opotřebovaná digitální díla, která vypadá vinobraní.

Podobně jako u posledního příkladu se textury papíru používají k tomu, aby umělecká díla vypadala jako starý plakát. Tmavá textura je také umístěna nad vrchol siluety boxera.

Kombinace textur dřeva, recyklovaného papíru a kávových skvrn byla použita zde k vytvoření skutečně úžasného efektu. Režim prolnutí byl aplikován na vrstvu, na které je znak zapnutý, což umožňuje zobrazení textury.

Textury v tomto návrhu webových stránek jsou minimální a jemné, nicméně významně přispívají k vizuálnímu zájmu o celkovou práci.

Textury se zde používají k oživení pozadí a typografie. Nejjednodušší textury, ale stále tak efektivní.

Textury byly použity minimálně pro oživení tohoto obrázku, jeho hloubku a přitažlivost pro oko.

Zde je kus, který prostě nebude vypadat stejně bez textury: pozadí, ilustrace a typografie jsou všechny texturované.

Tento kus je v tomto přehlídce poměrně odlišný od ostatních; textura není fotografie, ale vektorový obrázek.

Zdroje

Níže uvedený seznam obsahuje odkazy na několik skvělých webových stránek, kde si můžete stáhnout textury - a to jak prémiové, tak zdarma - pro práci ve vaší práci:

TextureVault
Prémiový trh zejména pro stahování jednotlivých textur. Cena se liší v závislosti na velikosti textury.
Lost & Taken
Skvělý blog, který obsahuje některé z nejlepších textur. Některé opravdu kvalitní věci. Můžete také zobrazit textury v galerii .
CG Textures
Pravděpodobně jedna z největších texturních galerií kolem. Tisíce snímků jsou k dispozici zdarma.
TextureLovers
TextureLovers je v podstatě galerie textur z celého webu. Je to skvělé místo, kam jít, pokud si nejste jisti, kde hledat, protože zobrazuje textury z různých webových stránek.

6. Oříznutí obrazu a masky vrstvy

Obrazové oříznutí a maskování vrstev jsou efektivní pro přidávání dalších prvků do díla. Proč obsahovat celou fotografii, když můžete ukázat, co potřebujete, nebo je stylovat, aby odpovídalo zbytku práce? Jednoduchost je klíčem v retro designu.

Tento kus skvěle využívá textury a typografických efektů a chytře využívá masku vrstvy k zachycení obrazu galaxie. Vypadá skvěle.

Tento retro kousek používá nejen retro-maskované fotografie, ale také kruhy, tahy, míchací módy a omezené barevné schéma - prakticky všechny hlavní prvky obsažené v tomto článku.

Tento kus je ultra-minimalistický, ale vypadá skvěle. Obrazy jsou maskované do kruhů a velmi hlučné, což jim dává skvělý retro futuristický vzhled.

Níže uvádíme několik návodů na oříznutí fotografií a používání mask vrstvy Photoshopu:

Napsal výhradně WDD od Callum Chapman, návrhář a ilustrátor obchodování jako Circlebox Creative . On také provozuje The Inspiration Blog a Picmix Store

Sdílejte s námi své ročník a retro vzory a ilustrace, stejně jako všechny články nebo výukové programy, které mohou pomoci vašim kolegům čtenářům.

design webový design retro vinobraní driblovat