建站常識
如何在小空間放置大圖片
2009-08-04 14:19:00
那里都有狹窄的空間:網(wǎng)頁橫幅、新聞標(biāo)題處的空間、柱狀的廣告,但一張來自照相機(jī)的照片卻要大很多,它們的比例一般是 6 × 4 英寸 。你如何處理這兩者的關(guān)系?在本文中我們提供三種解決辦法。
一、新聞標(biāo)題:
我們想將一張大的照片應(yīng)用在標(biāo)題區(qū)域里,怎么辦?
1 、大膽剪切:
如果你的照片的空度與你想要應(yīng)用的區(qū)域的寬度一樣,我們可以對照片進(jìn)行大膽的剪切??赡芰钅愀械街缘氖牵粡埿≌掌瑯涌梢詡鬟_(dá)大照片的精粹。
選擇照片最傳神的焦點(diǎn),然后在照片上應(yīng)用剪切。令你感到驚訝的是,你切得越窄,照片反而越有力量感!
只要對上圖看上一眼,我們的眼睛就能夠快速接收各種信息,包括:
- 他們的年紀(jì);
- 他們的性別;
- 他們的頭發(fā);
- 他們的衣服;
- 他們的表情;
- 他們的關(guān)系;
而所有這些正是我們所需要的!
將剪切后的圖片應(yīng)用在這篇有關(guān)退休服務(wù)報(bào)道的標(biāo)題中,效果非常不錯(cuò),比用上原來整張大圖片效果還要好!
#p#二、填充背景
與剛才剪切相反的是,如果原來的圖片很小,而所需要應(yīng)用的區(qū)域又很寬,怎么辦?如果這張圖片的背景有一種實(shí)色或某個(gè)有規(guī)則的圖案,我們只需要在它的背景上取色或復(fù)制,然后將要應(yīng)用的空間進(jìn)行填充就可以了。
我們以一個(gè)網(wǎng)頁橫幅為例:
上圖中的圖片已經(jīng)很小,而我們要應(yīng)用到的白色區(qū)域又很寬,兩者的比例相差很大。我們首先在圖片上的背景取色,如上圖為黑色。
當(dāng)我們對白色的區(qū)域填充后,使到我們現(xiàn)在焦點(diǎn)都放在南瓜上。感覺就象舞臺上聚光燈下的演員一樣。
我們采有一種比較特別但仍能保持低調(diào)的文字,使文字與圖片能夠漂亮地結(jié)合——南瓜顯得很有力量感,而文字則顯得空間開闊。
#p#三、兩個(gè)一起上
如果一張圖片還不夠,那就用兩張。這兩張圖片既可以放在一起,也可以分開。在開始時(shí)對圖片進(jìn)行恰當(dāng)?shù)丶羟袑⒂懈欣谇宄鬟_(dá)信息。
我們以設(shè)計(jì)一個(gè)書簽為例:
在書簽上必須要有“ Read a book: A pathway to imagination ”(讀書:想象之路),為了傳達(dá)這個(gè)信息,我們需要在一個(gè)狹窄的豎立空間里放進(jìn)兩張圖片。
在這個(gè)書簽設(shè)計(jì)中,我們會應(yīng)用到上面這兩張圖片
當(dāng)我們有一張構(gòu)圖比較復(fù)雜的圖片時(shí)(如上圖這張叢林小路的圖片),它的背景沒有一種固定的實(shí)色可以復(fù)制,這時(shí)我們可以做兩件事:
上圖 1 :垂直剪切
我們需要注意的是要剪切多少才能傳達(dá)出原有圖片的主要信息。上圖剪切后的圖片只占到原圖的六分之一,但它仍然能夠清晰傳達(dá)出“叢林中的路徑”的主題。但它還是太大,因?yàn)槲覀冞€有其它東西要放上去,所以……
上圖 2 :再切掉一半
其實(shí)我們將左圖再切掉一半,仍然不影響我們這張圖片所要傳達(dá)的信息。而剪切掉后,下面就可以留出足夠的空間給文字了。
我們現(xiàn)在要應(yīng)用第二張圖片了(那疊書的圖片),而文字可以使不同樣式、顏色形成對比。而且第二張圖片還可以遮住圖片的切邊,同時(shí)又能傳達(dá)出這張書簽的第二個(gè)信息。
上圖 1 :分離
圖片與留白空間形成了一種吸引人的視覺效果。圖片的樹木與書本兩者分開,這種設(shè)計(jì)是希望通過對比給人留下深刻的印象。
上圖 2 :重疊
為了減少中間高對比的視覺效果,我們將下方整個(gè)白色的背景填充上與道路比較接近的顏色。而那一疊書則放在接合位的地方,使到兩張圖片形成一個(gè)整體??雌饋戆婷骘@得很充實(shí),但整個(gè)構(gòu)圖略略顯得有點(diǎn)擠。
上圖 3 :混合
我們將圖片中的路徑虛化,使到整張書簽混為一體。這時(shí)我們會看覺到這兩張圖片形成了一張圖片的視覺效果。
本文所用的顏色數(shù)值如下:
(全文完)
譯文原文:http://www.logosky.net/webpage/artreview/small_sapce_big_photo_20060106.htm
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計(jì)的五大特點(diǎn)
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計(jì)制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計(jì)應(yīng)該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁設(shè)計(jì)的好看,這個(gè)網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費(fèi)者,應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計(jì)都有哪些新的趨勢?
延伸閱讀
- [2019-06-09 11:36:02] 運(yùn)動(dòng)的圖形圖片在網(wǎng)站上的體現(xiàn)
- [2009-08-01 22:33:00] 好的產(chǎn)品設(shè)計(jì)并非始于圖片,而是對人的理解
- [2008-02-14 12:42:00] 網(wǎng)站中的圖片設(shè)計(jì)
- [2019-01-10 17:05:34] 「卡片式設(shè)計(jì)」能讓用戶有良好的體驗(yàn)?
- [2007-06-06 15:01:00] 加速圖片顯示
- [2020-11-25 15:03:59] 青島網(wǎng)站建設(shè)時(shí)如何選擇圖片?
- [2010-12-11 09:57:00] 圖片格式與設(shè)計(jì)那點(diǎn)事兒
- [2018-03-28 10:04:17] 科普網(wǎng)站設(shè)計(jì)、制作中的圖片版權(quán)
- [2009-06-09 22:34:00] 圖片投射方法在會員官網(wǎng)視覺風(fēng)格調(diào)研中的運(yùn)用
- [2006-08-21 12:08:00] 網(wǎng)頁制作常見問題:網(wǎng)頁、圖片路徑問題
- [2019-06-03 08:42:30] 圖片在網(wǎng)站上的應(yīng)用
- [2009-06-04 16:23:00] Web設(shè)計(jì)師需要的10個(gè)高質(zhì)量的ICON圖片資源網(wǎng)站
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
青島不錯(cuò)的英文網(wǎng)站建設(shè)公司 審美 中小型企業(yè)網(wǎng)站建設(shè) 網(wǎng)站推廣 營銷型網(wǎng)站建設(shè) 搜索引擎 H5定制設(shè)計(jì) 青島高端網(wǎng)站建設(shè) HTML5 集團(tuán)性網(wǎng)站 H5 青島高端網(wǎng)站建設(shè)公司哪家好 青島IT資訊 集團(tuán)官網(wǎng) 英文網(wǎng)站建設(shè) 如何做網(wǎng)站優(yōu)化 青島好的網(wǎng)站優(yōu)化公司 版面布局 平面設(shè)計(jì) css 青島輪胎網(wǎng)站設(shè)計(jì) 網(wǎng)站策劃 網(wǎng)站視覺 青島海洋投資集團(tuán) 搜索引擎蜘蛛 扁平化設(shè)計(jì) 程序開發(fā) 網(wǎng)站設(shè)計(jì) 海信網(wǎng)絡(luò)科技 圖形網(wǎng)格