如何在您網(wǎng)站的圖像上使用文本文字更美觀？我們整理17個(gè)技巧給你參考

1.添加對(duì)比度

文本必須可以讀取才能成功。確保文本顏色變化足以與照片結(jié)合使用。如果您的照片背景較暗，請(qǐng)選擇白色（或淺色）文本。如果您的照片背景較淺，請(qǐng)進(jìn)行深色處理。

對(duì)比度也可以指與圖像中發(fā)生的情況有關(guān)的文本大小?？套謶?yīng)與圖像配合使用（而不是與圖像配合使用）。例如，在上面的Pack網(wǎng)站上，圖像大而粗，而類型又薄又輕。這些元素可以協(xié)同工作，但是它們包含對(duì)比元素。

2.最好能使文本成為圖像的一部分

3.遵循視覺流程

處理文本和照片時(shí)，處理圖像的視覺流是最重要的技巧之一。您需要單詞以適合圖像的邏輯部分。并且請(qǐng)注意不要在圖像的重要部分上放置文字，例如照片，臉部或您要展示的產(chǎn)品中的主要?jiǎng)幼鳌?/p>

在視覺流方面，請(qǐng)尋找圖像主題所處的文本空間。這兩個(gè)示例都將您從肢體語言或照片中人物的眼睛引向文本。

4.將圖像模糊處理

處理圖片最簡單的工具之一就是能夠模糊圖像的一部分。使用Adobe Photoshop之類的軟件在圖像的背景上添加一點(diǎn)模糊可以幫助您的文本突出顯示。模糊也可以將重點(diǎn)放在您的總體概念上，例如上面的Wallmob網(wǎng)站。模糊使實(shí)際的產(chǎn)品和文本成為站點(diǎn)用戶的重點(diǎn)。

5.將文字放在一個(gè)盒子里，比如圓形比如方形

當(dāng)照片包含很多顏色或明暗部分之間的差異時(shí)，將文本放在另一幀中確實(shí)可以使其突出。

選擇一個(gè)形狀-您可以在上方看到一個(gè)矩形和圓形-與您的單詞選擇和圖像配合使用。然后為該框?qū)ふ乙环N顏色，該顏色應(yīng)提供足以顯示字母的對(duì)比度?？紤]使用具有一定透明度的框架以獲得更柔和的感覺，使圖像可以透徹顯示。

6.將文本添加到背景

最好的“技巧”之一是將文本放在圖像的背景部分而不是前景。通常，背景不那么忙碌，并且在放置文本時(shí)更容易使用。背景通常也是單色，因此它是容易識(shí)別甚至更易于閱讀的文本顏色的位置。

最終結(jié)果是看起來自然的擺放位置，不需要對(duì)主照片進(jìn)行很多技巧或改動(dòng)。

當(dāng)您不確定什么有效時(shí)，請(qǐng)考慮擴(kuò)大規(guī)模。這既適用于圖像（使圖像大于生活），也適用于類型本身。尺寸元素將引起用戶的注意，并且使用一個(gè)較大的元素可以更容易地使用文本和圖像建設(shè)比例。

使用較大的圖像（例如上面的咖啡豆）可以幫助改善陰影和對(duì)比度差異。使用大字體可以為刻字增加足夠的分量，使其幾乎可以對(duì)任何圖像可以讀取。

8.為文字添加顏色

添加一絲色彩也可以增加圖像的視覺趣味。上面的網(wǎng)站采用兩種截然不同的方法-一種使用圖像中看不到的對(duì)比色來突出顯示某些單詞，而另一種則使用反映圖像的色調(diào)。兩種技術(shù)都可以同樣有效。

9.使用偏色

越來越流行的效果是在圖像上使用了偏色以允許放置文本。雖然這可能是一個(gè)棘手的效果，但它也可以使設(shè)計(jì)令人驚嘆。

選擇具有高度視覺吸引力的顏色。平衡在于使覆蓋顏色足夠透明以使圖像可以透過，但又不能太透明以至于文本難以閱讀。在掌握此技巧之前，您可能必須嘗試幾種顏色和照片選項(xiàng)。不確定使用什么顏色？從與您的品牌顏色相關(guān)的覆蓋層開始。

10.讓文字變得簡單一些

經(jīng)過時(shí)間考驗(yàn)的設(shè)計(jì)建議“保持簡單”也適用于文本和圖像。您確實(shí)希望人們看到照片和文字。應(yīng)用過多的技巧可能會(huì)產(chǎn)生相反的效果。

11.將圖像移到一邊很有效

當(dāng)您在照片上放置圖片時(shí)，并不完全意味著照片應(yīng)完全位于內(nèi)容的基礎(chǔ)上。您可以隨意使用背景來建立內(nèi)容的焦點(diǎn)。為此，您可以輕松地稍微移動(dòng)圖像。您可以將其移動(dòng)到底部或左側(cè)或右側(cè)。

要注意的是對(duì)比度，大小和字母樣式。關(guān)鍵是，在這種特殊情況下，由于背景上的不統(tǒng)一，圖像上的文字將在可以讀取性方面存在一些問題。

因此，消除所有可能的問題并為用戶提供最佳對(duì)比度是您的任務(wù)。這意味著字母的大小以及樣式應(yīng)創(chuàng)造出足夠的美感，使之易于理解。

12.開箱即用的效果

將背景圖像移到一邊是一個(gè)現(xiàn)代的技巧，也是一個(gè)巨大的趨勢(shì)。但是，當(dāng)您在照片上加上版式以使項(xiàng)目看起來最新時(shí)，可以采用另一種解決方案，即從字面上和形象上進(jìn)行開箱即用的思考。

該概念意味著擴(kuò)大視覺邊界并將內(nèi)容推到背景之外。您需要做兩個(gè)基本的事情：首先，拉伸標(biāo)題；第二，縮小背面的圖像，從而在周圍形成巨大的間隙。

這樣，圖像上的文本會(huì)比場(chǎng)景中的其他元素離您更近。此外，圖像將用于裝飾目的，而頁眉將用于提供信息目的。這種裸露的技巧也增加了微妙的深度。

以氣候歷史為例。在這里，您可以看到超出背景的圖像上的文字。即使沒有陰影，字幕自然也會(huì)出現(xiàn)。達(dá)成協(xié)議的是，團(tuán)隊(duì)熟練地使用了字體家族，該字體家族提供了具有清晰明快外觀和字體大小的字母格式，還幫助標(biāo)題從背景中脫穎而出。

13.垂直顯示文字

有時(shí)，通過在圖像上放置文字來建設(shè)杰作的全部工作是放棄傳統(tǒng)路線，并選擇一些奇妙的技巧。有許多方法可以避免人跡罕至。但是，最被低估但最容易實(shí)現(xiàn)的方法之一就是使用垂直節(jié)奏。

在過去的幾年中，垂直節(jié)奏非常流行。盡管主流無疑已經(jīng)降溫了一點(diǎn)，但是仍然受到熱烈歡迎。感覺在線觀眾還沒有準(zhǔn)備好放手。該解決方案為我們提供了很大的創(chuàng)造空間，當(dāng)然也為項(xiàng)目提供了神秘的東亞文化色彩。

發(fā)揮作用時(shí)，可以遵循三種主要模式。首先，您可以從字面上使用豎排文字來模仿受日本傳統(tǒng)書寫系統(tǒng)啟發(fā)的美學(xué)。只需更改讀取流的方向，即可使其從上到下，然后從左到右。

其次，您可以通過將照片上的版式旋轉(zhuǎn)90度來扭曲字幕的角度，就像2020 Park Offer一樣。請(qǐng)注意，網(wǎng)站背后的團(tuán)隊(duì)不僅在標(biāo)題上使用了垂直節(jié)奏，而且在一些功能元素上也運(yùn)用了垂直節(jié)奏，從而使設(shè)計(jì)真正和諧。

最后，您可以按照習(xí)慣性的水平閱讀流程在圖像上放置文本，但是將其分成單詞并將它們排列在列中。這樣，您可以使用戶在閱讀時(shí)免受意外的折磨，但仍會(huì)添加獨(dú)特的熱情?？紤]一下Le Clercq Associes，看看他們?nèi)绾卧谡掌鲜褂门虐?。多虧了列的組織和垂直接觸，該解決方案才顯得很棒。

14.動(dòng)態(tài)效果

我們提供了許多關(guān)于如何使用靜態(tài)方法在照片上進(jìn)行排版設(shè)計(jì)的好技巧。但是，如何進(jìn)一步擴(kuò)大界限并充分利用現(xiàn)代技術(shù)呢？

如果您需要在網(wǎng)站上的圖像上放置文字，那么該是時(shí)候從一些創(chuàng)造性的想法中受益了。更重要的是，網(wǎng)頁設(shè)計(jì)領(lǐng)域鼓勵(lì)您通過在該領(lǐng)域不斷實(shí)施一些奢侈的事情來做到這一點(diǎn)。讓我們考慮使用動(dòng)態(tài)解決方案在圖像上使用文本進(jìn)行設(shè)計(jì)的幾種令人難以置信但已久經(jīng)考驗(yàn)的方法。

15.用視差效果使事物增添色彩

視差效果是那些技術(shù)的一種，盡管與我們?cè)谝黄鹨延泻荛L時(shí)間了，但仍然很容易產(chǎn)生這種令人贊嘆的效果。相對(duì)容易實(shí)現(xiàn)。因此，有時(shí)會(huì)嚴(yán)重使用它。但是，這些時(shí)代已經(jīng)過去，如今，視差效應(yīng)已成為開發(fā)人員工具集中可刷新任何設(shè)計(jì)的可靠資產(chǎn)之一。

視差效果的關(guān)鍵特征在于，通過巧妙地產(chǎn)生深度錯(cuò)覺，可以使設(shè)計(jì)具有3D尺寸的可愛感覺。

本質(zhì)上，視差效果是指使場(chǎng)景的元素以各種速度移動(dòng)。通常，背景靜止不動(dòng)或以最低速度移動(dòng)，而前景上的元素移動(dòng)得更快，但每個(gè)元素的速度都不同。因此，場(chǎng)景的所有方面都受到了觀眾的關(guān)注。

16.使用透視規(guī)則

除了視差效果外，還有另一種簡單而有效的方法來產(chǎn)生深度錯(cuò)覺-即使用透視規(guī)則。雖然上一招需要滾動(dòng)以顯示其美感，但該招僅需要從鼠標(biāo)光標(biāo)進(jìn)行定期移動(dòng)。這些移動(dòng)可以在屏幕上的任何位置進(jìn)行。

因此，由于用戶不必采取任何進(jìn)一步的措施來看到效果，因此它的生產(chǎn)率更高。他們唯一要做的就是將光標(biāo)與屏幕一起移動(dòng)，并且這種情況一直發(fā)生。

該技術(shù)通過傾斜其邊緣并稍微旋轉(zhuǎn)其平面，使照片上的版式轉(zhuǎn)向鼠標(biāo)光標(biāo)的位置。

將TEDx ToughlaqRd視為成功采用方法的代表示例。在這里，團(tuán)隊(duì)進(jìn)一步發(fā)展了這個(gè)想法。達(dá)成協(xié)議的是，他們將標(biāo)題分成幾層，以突出強(qiáng)調(diào)中間部分。請(qǐng)注意整個(gè)內(nèi)容塊的移動(dòng)：它是如此的平滑和完美，以至于玩起來真是一種樂趣。

17.添加懸停效果

也許，在圖像上的文本上添加懸停效果是當(dāng)今動(dòng)態(tài)解決方案工具集中久經(jīng)考驗(yàn)的技巧之一。

處理圖像時(shí)，請(qǐng)使用簡單的版式和簡單的圖像以獲得最佳效果。切記要讓圖像的重要部分無障礙地顯示，并在設(shè)計(jì)中保持有效，直到文本清晰可以讀取為止。