設(shè)計(jì)技巧:如何在設(shè)計(jì)中一圖多用
【譯者的話】 在版面設(shè)計(jì)中,你有很多地方都需要用到圖片,但你手上只有一張圖片,怎么辦?在本文中,我們用兩個(gè)實(shí)例來(lái)說(shuō)明如何解決這個(gè)問(wèn)題,我們只用一張圖片,通過(guò)分解剪切,就可以將這張圖片用在不同的地方,出來(lái)的效果非常漂亮。一張圖片,其實(shí)已經(jīng)足夠!
原文出處:http://www.zhuankesheng.com/blog/post/28.html
在本文中,我們要將你買回來(lái)的圖片物盡其用:通過(guò)從原圖中得到幾個(gè)小圖,完全可以配合你的版面設(shè)計(jì)。
這是我們?cè)O(shè)計(jì)要用到的原圖
在設(shè)計(jì)板式中,就變成這樣。
你有注意到其實(shí)在大圖中隱藏著一些小圖片嗎?所以我們可以大膽嘗試,將一張照片剪切成多張小照片。而且,由于這些小圖片都是來(lái)自同一張大圖片,所以它們的色調(diào)及圖案都顯得非常統(tǒng)一,這使你的設(shè)計(jì)輕而易舉就可以獲得協(xié)調(diào)的效果。
其中的關(guān)鍵就是你要選擇好到底要哪部分。我們可以想象一下我們是在跟別人講一個(gè)故事。一張從大圖片出來(lái)的小圖片其實(shí)有著一種全新的意義,這個(gè)過(guò)程本身就很有趣。將圖中各個(gè)不同的部分分離,然后看一下我們到底有什么信息可以傳達(dá)給別人。
當(dāng)我們一眼望去這張海灘的圖片時(shí),我們是將它看成一個(gè)整體的,或多或少會(huì)對(duì)其中的細(xì)節(jié)置若罔聞。但如果我們將各部分分離,我們會(huì)發(fā)覺(jué),其實(shí)每一部分都隱藏著一個(gè)“故事”,都有著各自的重點(diǎn)。
如上圖右下角小圖中,我們就會(huì)想,海岸線到底有多長(zhǎng)?這張圖片雖然顯得有點(diǎn)小,但因?yàn)樗锩姘岁懙嘏c大海,所以這張圖片可以使它與另外兩張我們截取的圖片形成統(tǒng)一。
一幅人間天堂式的風(fēng)景,它是駛離陸地還是準(zhǔn)備靠岸?如果我們沒(méi)有看原圖,我們無(wú)從判斷。
舊的總比新的更有性格。我們選擇這艘破舊的小船,讓你不禁在想,這艘小船見(jiàn)證了多少的風(fēng)雨?當(dāng)我們從大圖中截取讓它變成一幅單獨(dú)的圖片時(shí),這艘小船顯得孤伶伶的,它以前的主人是誰(shuí)?它現(xiàn)在為什么會(huì)停在這里?旁邊的那些腳印又是誰(shuí)留下的?
我們只截取小船的船頭部分,這部分只占原來(lái)的大圖很小的位置,還不到十分之一。但我們卻將它作為版面的大圖,這樣,它給人的尺寸感覺(jué)就完全改變了,現(xiàn)在,它成為了一個(gè)有趣的視覺(jué)焦點(diǎn)。上圖中,三張圖片的尺寸都不一樣,右邊的特別大,左下的圖片特別小,這種不同尺寸的圖片可以讓我們的整個(gè)版面產(chǎn)生層次感。而讀者的眼睛就會(huì)從右的到左(上圖下的線條表示了讀者在觀看時(shí)的視覺(jué)線路)。
本文地址:http://m.pkvc.cn/tutorial/di842.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見(jiàn)頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺(jué)設(shè)計(jì)分享—專題頁(yè)面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏