您現在的位置是:電腦技術吧?>? 編程技術 ??>??fireworks怎么用,fireworks用的多嗎??>??正文詳情

fireworks怎么用,fireworks用的多嗎

冼明喆2019-11-19 09:31:24 人圍觀
簡介the fireworks對于焰火中圖標的詳細描述,在使用焰火(以下簡稱FW)進行圖標設計時要注意兩點:一是FW注重網頁設計,不適合產生一些過于復雜的PS效果,請期待FW CS5的PS過fireworks的中文

fireworks中進行圖標細節刻畫,使用Fireworks(以下簡稱FW)進行圖標設計主要要留意兩點:  一是FW專注于web設計,不適合創造一些過于復雜的PS效果,請期待FW CS5的PS濾鏡;  二是FW的編輯方式類似于AI,如果您習慣于工作在PS類的像素著色環境下,請華麗的飄過。

  接下來進入正題,我們拿一個比較標準的圖標來臨摹做說明,這樣可以方便您理解。

下圖是國內知名的eico design所創作的一套圖標,我們要臨摹的對象就是圖中被框住的信封圖標。

事先說明一下,因為教程的主題,我們會對這個圖標加入一些細節,因此我們的最終臨摹結果會與原圖不太一樣。

  圖01  把需要臨摹的圖標剪下來作為參考,鎖定圖層。

我這里FW的路徑面板是從Fireworks CS4中提取的,不過對接下來的操作都無影響,因為我使用的全是CS3包含的功能。

  圖02  用Rounded Rectangle工具畫出一個和樣圖相仿的圓角矩形,使用四個圓角控制點調節好圓角的半徑,然后按下Ctrl Shift G把圖形打散。

  隨后把第一個圓角矩形復制一份,用白色箭頭工具往四個方向移動一像素,制作出如圖所示的兩個圓角矩形(注意用白箭頭處理好圓角處的八個節點,它們是要對齊的)。

  我們不能用Stroke去給矩形加外邊框,因為虛邊會把你給搞死。

如果你用Rounded Rectangle工具畫出來的圓角矩形已經出現了非Stroke虛邊,那就把節點打散后,用黑色箭頭工具選中那個Path,點擊路徑面板的Round Points to Pixels把路徑的所有節點歸位到像素交點(也可以用白色箭頭工具選中某個節點單獨進行歸位)。

  圖 03  把大的圓角矩形復制一份放到最頂層,用白色箭頭配合Shift 方向鍵得到一個倒三角,隨即復制一份,上面的倒三角用Linear填充漸變;下面的倒三角實心填充褐色,并設置1px羽化。

  圖04  用白色箭頭選中途中所示那些節點,然后用鍵盤的方向鍵往下挪兩個像素,這樣使信封看起來長一點(因為這里單個圖標不受整體風格約束)。

  圖05  把之前畫的漸變填充倒三角作垂直翻轉,復制一份擺放好,它們的位置關系如下圖所示。

兩個倒三角上下相隔1px多一點。

可以用白色箭頭工具選擇深褐色倒三角上方的四個節點,以鼠標拖動的方式配合輔助線挪動把節點往上挪0.3~0.5個像素,這樣可以讓深褐色的先顯得不那么虛(再一次重申,盡早打消用Stroke作邊線的念頭,這里不是photoshop)。

  圖06  留意樣圖的圖標上方有一道高光,而且不是常見的單像素放射高光(大約為兩個像素的高光處上面的1px高光要亮于下面的1px),因此可以考慮用Ellipse這種橢圓形的放射性填充達到這種效果。

  我們選中并復制最底的圓角矩形兩次,移動位置后得到兩個上下相隔2px的圓角矩形,用兩個矩形路徑相減的方法得到一個新的路徑,對其進行Ellipse填充(白色0-100透明度),最后把這個高光路徑的疊加方式設置為Overlay。

  圖07  底部加個1px高光。

  圖08  現在的結果如下圖,先歇一會兒,喝口茶,接下來我們進行細節的添加。

  圖09  暫時把背景改成白色,我們可以看到之前一個倒三角因為使用了羽化,有一些像素從信封兩邊溢出了一點。

  這里有兩種方法可以對這些像素進行處理,一是Flatten為Bitmap,二是保留路徑的前提下做遮罩,我偏向于后者,因為這樣保留了路徑,以后如有需要可以進行再編輯,操作如下圖所示:

  圖10  我們回到深色背景,有沒有感覺到信封的兩邊顯得有點平?我們用一個Bars或者Radial填充來加點效果上去。

  圖11  接下來為信封的上下三角形加單像素高光,因為之前已經反復講過路徑相減(Punch Path,您可以在Modify Combine Paths菜單下找到它)的操作,這里不再作說明,如下圖:

  圖12  同理給下面的三角形加高光。

  圖13  因為背景是比較深的顏色,我們可以考慮加個發光。

這里我們不去用FW的投影或發光濾鏡,還是用Path,為什么?因為比較好控制,個人喜好吧。

我們可以做一個比信封底層的圓角矩形上下左右多1px的新圓角矩形,不羽化,透明度30。

  圖 14  再在加一道1px高光在下面。

  圖15  至此圖標基本完成,下面進入潤色階段。

我們把所有圖層全選復制一份,然后迅速按下Ctrl Alt Shift Z把圖層平面化為位圖,然后設置疊加方式為Overlay,透明度60,這樣就會發現圖標的飽和度、對比度被提高了,這是我個人比較喜歡的快速潤色的方法,但并非任何時候都適用,某些時候你必須手動用FW自帶的濾鏡去調曲線、對比度、飽和度等參數。

  Finish  最終效果(其實信封下方的三角我也用路徑加了Path作為投影,寫完了才發現,我就不再折騰了)

版權聲明:本文由 冼明喆 整理編輯。

原標題:fireworks,邊用邊學fireworks8

轉載注明出處:http://www.dn9ww09s.icu/program/13584.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 我的激萌怎么不能拼圖,怎樣用faceu激萌拼圖

    我的激萌怎么不能拼圖,怎樣用faceu激萌拼圖 相關圖片b612可以拼圖嗎作為一款功能強大的美容相機,用戶最關心的問題是如何制作拼圖和視頻。現在,超人軟件編輯將向您介紹關于薊門的相關內容,希望您喜歡它是怎么發生的?faceu激萌相...

  • 王者助手對局先知,王者助手怎么打開對局先知

    王者助手對局先知,王者助手怎么打開對局先知 相關圖片王者對局先知怎么設置王者榮耀作為一場競技游戲,知道你是誰,你是誰。國王榮耀助手中的火柴先知功能可以讓你知道誰在對手陣營中更強大,有利于在游戲初期鎖定目標,在搖籃中...

  • 吻合,吻合手術

    吻合,吻合手術 相關圖片神經吻合術口型匹配(交換方式)進入論壇參與討論:http://www.missyuan.com/viewthread.php?TID=417579正確的嘴型匹配是一門藝術吻合的近義詞...

  • 如何設置簽名,設置簽名

    如何設置簽名,設置簽名 相關圖片qq個性簽名設置權限如今,百度貼吧越來越注重個性化,所以在普通的回復樓里,有一個貼吧的小尾巴,還有一個個人簽名文件。今天,我們來談談如何設置簽名文件進入百度貼吧,登陸...

  • audio 標簽,audio標簽的autoplay

    audio 標簽,audio標簽的autoplay 相關圖片audio最新HTML5音頻標簽使用JS進行回放控制實例音頻標簽可以在HTML5瀏覽器中播放音頻文件。默認情況下,音頻提供一個控制面板,但有時我們只需要播放聲音。控制面板由我audio標簽自動...

  • 堅果Pro2,堅果Pro

    堅果Pro2,堅果Pro 相關圖片堅果pro2參數Nut Pro 2是hammer technology推出的最新智能手機。我相信許多孩子剛得到的第一件事就是插上SIM卡。如何安裝nut pro2的SIM卡?請堅果手機pro2...

  • 貼吧小尾巴怎么設置不了,貼吧小尾巴怎么添加

    貼吧小尾巴怎么設置不了,貼吧小尾巴怎么添加 相關圖片貼吧會員的小尾巴怎么設置經常逛棒棒的小伙伴,發現一些用戶跟帖中的棒棒小尾巴,干脆從人群中脫穎而出,有木有。那么你知道怎么設置小尾桿嗎?很多人不知道如何設置小尾巴的...

  • 微信為什么沒有搖一搖功能,微信搖一搖功能

    微信為什么沒有搖一搖功能,微信搖一搖功能 相關圖片怎么關閉微信搖一搖功能HTML5的一個重要特性是設備定向,它將方向傳感器和運動傳感器封裝在底層,并提供DOM事件支持。此功能包括兩種類型的事件:1。設備定向:封裝有沒有搖一搖...

  • 錘子pro2什么時候出的,堅果pro發售價

    錘子pro2什么時候出的,堅果pro發售價 相關圖片堅果pro2內存不夠用怎么辦Nut pro2是hammer technology推出的最新智能手機。對于許多錘子粉,堅果pro2什么時候上市?什么是nut pro2的無障礙模式?現在,超人堅果pro什么時候上市...

  • 讀取圖像數據,如何快速讀取圖像數據

    讀取圖像數據,如何快速讀取圖像數據 相關圖片如何讀取圖片數據用VC進行數據庫編程時,經常需要對數據庫中的圖像數據進行處理,從數據庫中讀取和顯示圖像。圖像數據與文本字段不同。它作為OLE字段存儲在數據庫中,通過自動交...

熱評文章

  • 小紙條,小紙條是什么

    小紙條,小紙條是什么 相關圖片愛心小紙條小紙條是間諜的新功能。我相信有很多小朋友不知道小紙條在哪里。現在,超人軟件想向你介紹如何看到喜歡我的人。我希望它能幫到你小費呢?小費匿名小紙條...

  • html5標簽,html常用標簽

    html5標簽,html常用標簽 相關圖片htmlHTML5中新的details標簽允許用戶創建一個可擴展和可折疊的組件,使文本或標題包含一些隱藏信息。通常,詳細信息用于進一步解釋頁面上顯示的內容。它顯示了與jHTML5...

  • 使用方法是什么,正確使用放大鏡的方法是什么

    使用方法是什么,正確使用放大鏡的方法是什么 相關圖片試管架使用方法什么是ipscan?對于普通用戶來說,ipscan是一個奇怪的工具。但是對于那些經常與網絡和網絡管理員聯系的人來說,這種實用的IP地址掃描軟件可以節省他們在網絡滅火器使...

  • 如何從團隊合作方面評價,如何評論一個團隊

    如何從團隊合作方面評價,如何評論一個團隊 相關圖片團隊個人評價在設計過程中,設計評審是一個重要的環節。無論是在一個獨立的設計團隊中,還是在一個具有移動性和距離感的設計團隊中,它都是整個設計過程中不可或缺的一部分。...

  • quik是什么軟件怎么用,quik是什么軟件有用嗎

    quik是什么軟件怎么用,quik是什么軟件有用嗎 相關圖片quik有什么用最近,很多華為用戶都在問什么是軟件Quik。Quik應用程序是系統庫故事相冊應用程序,它是為系統庫預制的精彩瞬間功能。為了避免干擾,默認情況下圖標隱藏在桌面上。q...

  • prtscsysrq鍵在哪,prtscsysrq鍵

    prtscsysrq鍵在哪,prtscsysrq鍵 相關圖片電腦上prtsc鍵的功能有些人知道屏幕截圖的鍵盤上有一個prtsc sysrq鍵,但是如何使用它呢?一些用戶按prtsc sysrq鍵,但沒有響應。原因是什么?實際上,prtsc syinsert鍵...

  • 如何制作導航條,導航條的制作

    如何制作導航條,導航條的制作 相關圖片ps導航條制作教程一。首先,創建一個1x6表,參數為:border=0cellpacking=3cellpadding=0;2。在表格的每個單元格中插入寬度和高度設置為100%的dreamweaver制作導航條...

  • 抖音后期自己配音,抖音里配音的圓圈怎么弄

    抖音后期自己配音,抖音里配音的圓圈怎么弄 相關圖片抖音上的siri配音自助餐作為一種流行的手機短視頻拍攝應用,受到了很多人的喜愛。最近,有很多用戶想知道如何配音和編輯視頻。現在,超人軟件會給你帶來震動的聲音抖音怎么自己...

  • 卡通動畫,卡通人物有哪些

    卡通動畫,卡通人物有哪些 相關圖片動畫可愛人物動畫分析:1。眉毛是固定的,只占一層;2。睜眼和閉眼的時間間隔:本例中,從睜眼到閉眼總共有20幀,閉眼10幀,睜眼5幀,從睜眼到閉眼3的動畫過程有5幀。注意眼睛漫...

  • 無線網絡被禁用啟用失敗,ccleaner官網怎么下載

    無線網絡被禁用啟用失敗,ccleaner官網怎么下載 相關圖片你沒有首選無線網絡 win10配置無線網絡時,有時無線適配器或訪問點有問題。有些用戶不知道如何解決。當你遇到這種情況時,你不必擔心。您通常可以通過排除故障并遵循相應的解決...

關注微信

变脸官网查询