網頁設計如何做出復古風格，看完這30個網站你就get了！

老式、復古、古典風格的就真的是古老嗎？非也，使用這種風格的網站才是「現代感」更強的網站，視覺效果也非常有趣，用這種比較少人用的復古風格作為主題，可以讓用戶有種想繼續看下去的慾望，本身對內容沒興趣的用戶也想去「玩一下」。

今天小編從 line25 里整理了30個以老式、復古風格為主題的網頁設計作品，設計師們可以進去參考下，當沒有靈感的時候，可以嘗試一下這些 Retor style，挑戰一下自己。

Trainrobber

當進去首頁第一眼的感覺就像看 4D 電影一樣，設計師不僅僅是使用了復古元素，還通過視差技術，讓畫面看起來像 4D 一樣的 FEEL，大家可以進去體驗哦，挺好玩的。

Chamberlain』s Leather Milk

這網站的圖片風格處理很到位，作為網頁設計師，圖片處理能力也需要學一下，後期設計達人網也會增加這類的教程文章。

瀏覽網站：http://leathermilk.com/

Vintage Hope

一個慈善公益性的網站，網頁大膽的使用黃綠色調子，風格統一。

Tom, Dick & Harry Creative Co.

風格式頁面設計，使用了較多的幾何圖形符號組成

Barleysgville

一個餐飲美食類網站，較多的使用了木紋理元素，果然與食品網站很搭調。設計不僅為了好看，還要合理才是好設計。

Cascade Brewery Co.

啤酒網站使用復古風格，確實有意思，這樣可以突出酒的歷史悠久……

Trellis Farm & Garden

文字及一些設計元素使用了臟痕、污漬紋理，從而就能達到復古的效果。

瀏覽網站：http://www.trellisfarm.com/

Matt Hovland

瀏覽網站：http://thislandishovland.com/

Austin Beerworks

一個啤酒廠的網站，看來酒行業，真的很適合使用復古風……我們看這網站時，可以學習下這個文字的效果，應該不會太難。

瀏覽網站：http://austinbeerworks.com/

Moonshine Grill

達人喜歡這網站的字體設計，不僅文字好看，文字的組合也相當到位，這樣文字即能表達，又能作為圖像 BANNER 展示，但這需要考驗設計師的文字製作能力了，建議同學們多看我們的字體設計欄目。

瀏覽網站：http://moonshinegrill.com/

Three penny editor

一個古老印表機……這想法……

瀏覽網站：http://threepennyeditor.com/

City-dog

Shiner

Collette Dinnigan

當我第一次打開網站後，看到這麼可愛的水彩手繪插圖，不禁會看多幾點，然後嘗試晃著滑鼠去點圖案，這果然是個很好的視覺引導。

為了讓網站整體有復古的感覺，頁面大部分設計元素都使用了手工繪製的效果，比如橫線也是。當然文本就不用手繪字體，請同學們記住，在使用多段文本的情況下，應該以閱讀體驗優先於視覺效果。

瀏覽網站：http://collettedinnigan.com/

All star lanes

Dna Darwin

Bay Street Biergarten

瀏覽網站

http://baystreetbiergarten.com/

MirroolCreek

網站字體大部是加粗的粗字體，這確實是復古的一大特徵。

Website design for Tallahassee

米黃色，在很多復古網站上出現，如果找不到好的色調，米黃必選，

Macaroni Bros

Farmer』s Market Kitchen

可以看看這組作品的復古圖案，這種圖文組合的圖案，就能有一種復古的氣息。

瀏覽網站：https://www.behance.net/gallery/Farmers-Market-Kitchen/11274719

Austin Eastciders

American Scraps

瀏覽網站：http://americanscraps.com/

Le tipi

雖然網站排版中規中矩，但能有一個美麗的 Banner，卻能讓網站增色不少。

瀏覽網站：http://www.le-tipi.com/

復古風 WordPress

想做一個復古的網站嗎？下面的一些以復古風為主 WordPress 主題，可以讓你快速搭建一個老式風格的網站哦。

PN

Hipster

瀏覽網站：https://themeforest.net/item/hipster-retro-responsive-wordpress-theme/3867290?ref=shejidaren

Modern Vintage

瀏覽網站：https://themeforest.net/item/modern-vintage-one-page-wordpress-theme/8375110?ref=shejidaren

Argenta

Retro

瀏覽網站：https://themeforest.net/item/retro-vintage-wordpress-theme/5075763?ref=shejidaren

Retro Portfolio

瀏覽網站：https://themeforest.net/item/retro-portfolio-one-page-vintage-wordpress-theme/1708109?ref=shejidaren

看了這些優秀作品，可以學習有很多和古老、復古的表現手法，日後要設計這類的網站，都可以從這篇文章的案例中借鑒。

翼狐網全新推出

【Photoshop手繪表情動畫製作教程】

主要通過手繪，

配合Photoshop時間軸面板，

利用幀動畫原理

創造風格各異的表情包動畫，

讓你在製作表情GIF的時候少走一些彎路，

提升GIF動畫製作效率！

快來加入學習吧！

親手繪製專屬於自己的表情包，

從此不再尬聊！

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！