tft每日頭條

 > 知識

 > 蠕動的虛線框

蠕動的虛線框

知識 更新时间:2025-05-12 08:55:16

  蠕動的虛線框 綠色軟件,綠色軟件下載,免安裝綠色軟件,源碼下載,共享軟件下載

  建造個人網站時,設計精巧、富于動态的Logo總是能為網頁增色不少。也許有的朋友見過Logo周圍有一圈細細的虛線圍繞着Logo緩緩蠕動的效果,下面我就和大家一起來探讨制作這種蠕動虛線框的一種方法。運行你的Photoshop,打開你制作好的Logo文件。什麼?如何制作Logo?這可不是幾句話能說得清的,而且不是本文的讨論内容,讀者朋友可以參考相關資料。需要強調的一點是,Logo的标準尺寸是88×31像素。本文中為了讓大家看得更清楚,筆者使用了一幅較大尺寸的圖片(如圖1)。

  (圖1)1、擴大畫布的尺寸。

  打開Logo文件後,該圖像隻有一個背景圖層,由于我們需要它的輪廓,所以不能直接在該層上擴展畫布。在Layers面闆上,雙擊Background圖層右側的空白區域,在彈出的對話框中單擊OK按鈕,即可将背景圖層轉換為普通圖層Layer0。雙擊圖層的名字,将其命名為“Logo”。按住Ctrl鍵單擊面闆底部的新建圖層按鈕,在“Logo”圖層下面新建圖層Layer1。然後選擇菜單命令“Image→CanvasSize”,在對話框中将長度單位改為Pixels,勾選Relative複選框,Width和Height均增加40像素,Anchor保持默認的中間位置(如圖2)。

  (圖2)這步操作的結果是使畫布在上下左右四個方向都增大了20像素,為我們下面的步驟開辟了空間。2、制作用來填充背景的圖案。

  使用菜單命令“File→New”新建一個8×8像素,筆景色為白色的文件。為了能夠看清,我們可以按下Ctrl+"+"鍵數次,将文件視圖放大到合适比例以便于操作。選擇矩形選擇工具(快捷鍵為M),在左上角畫出一個邊長為4像素的正方形選框,再按住Shift鍵,在右下角添加一個同樣的選框。确認當前的前景色為默認的黑色,如果不是可以按下D鍵将其恢複為默認。按下Alt+BackSpace鍵使用前景色黑色填充選區,然後按下Ctrl+D鍵取消選擇(如圖3)。

  (圖3)選擇菜單命令“Edit→DefinePattern”,在對話框中為新圖案命名為“黑白方格”,然後按下OK按鈕,保存自定義的圖案。3、制作虛線框。

  回到Logo所在的文件,在Layers面闆上,選擇下面的Layer1圖層,然後選擇菜單命令“Edit→Fill”,在對話框中選擇使用Pattern填充,在下面的下拉列表中選擇我們剛才自定義的“黑白方格”圖案,其餘選項保持默認(如圖4)。

  (圖4)确定後,Layer1圖層将被密布而規律的黑白方格填滿(如圖5,圖中将“Logo”圖層隐藏)。

  (圖5)在Layers面闆上,單擊面闆底部的新建圖層按鈕,建立空白圖層Layer2。按住Ctrl鍵單擊“Logo”圖層,将其輪廓作為選區載入。再選擇菜單命令“Select→Modify→Expand”,在對話框中輸入1,按下OK按鈕,選區将向外擴張一個像素。按下Ctrl+Shift+I鍵,将選區反向。确認當前圖層為Layer2,按下Ctrl+BackSpace鍵,使用背景色白色填充選區。将圖層Layer2命名為“白邊”。按下Ctrl+D鍵取消選擇,可以看到Logo周圍出現了一圈虛線框(如圖6)。

  (圖6)4、使每條邊的虛線相互獨立。

  讀者朋友們一定已經看明白了,沒錯,這條虛線框是假的,這裡使了個障眼法,是讓背景圖案通過一條1像素寬的縫隙露出來一部分,如果讓它動起來的話會很困難。該怎麼辦呢?我們繼續使用障眼法――用四塊背景來分别對應四條邊。在Layers面闆上,将圖層Layer1拖動到面闆底部的新建圖層按鈕上,新建一個該圖層的副本圖層Layer1copy。再重複兩次複制操作,得到四個相同的布滿“黑白方格”圖案的圖層。選擇單列像素選擇工具,将圖像視圖放大到合适比例,在Logo左側的虛線上單擊,将該條虛線所在的直線全部選擇。在Layers面闆上,選擇圖層Layer1,然後單擊面闆底部的添加圖層蒙版按鈕,結果将為該圖層添加一塊幾乎為全黑色的蒙版,隻在Logo左側的虛線所在的直線上是白色的,也就是說圖層Layer1隻在那條直線上可見。接下來,同樣的原理,分别使用單行像素選擇工具和單列像素選擇工具選擇Logo上方、右側和下方的虛線,依次為餘下的三個圖案圖層添加蒙版。這時候,從表面上看Logo毫無變化,實際上圍繞在它周圍的虛線框已經是由四部分組成的了。可以隐藏某一圖層,查看一下情況是否如此。根據四個圖案圖層對應的部分,分别為它們命名為“左”、“上”、“右”和“下”(如圖7)。

  (圖7)5、在ImageReady中讓虛線動起來。

  我們的準備工作已經做完了,下面要切換到ImageReady中制作動畫。按下工具箱最底部的跳轉按鈕,ImageReady将自動運行,并且自動載入我們剛才準備好的文件,并且圖層和蒙版等元素全都保持原貌。在Animation面闆上,可以看到當前圖像自動成為動畫的第1幀。單擊複制當前幀按鈕,将建立與第1幀相同的第2幀(如圖8)。

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关知識资讯推荐

热门知識资讯推荐

网友关注

Copyright 2023-2025 - www.tftnews.com All Rights Reserved