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

1.添加對比度

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

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

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

3.遵循視覺流程

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

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

4.將圖像模糊處理

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

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

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

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

6.將文本添加到背景

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

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

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

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

8.為文字添加顏色

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

9.使用偏色

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

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

10.讓文字變得簡單一些

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

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

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

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

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

12.開箱即用的效果

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

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

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

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

13.垂直顯示文字

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

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

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

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

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

14.動態(tài)效果

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

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

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

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

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

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

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

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

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

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

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

17.添加懸停效果

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

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