第48節 - Adobe Illustrator: BlackJack Table & Cards
從這一節開始,我會開始製作Adobe Illustrator的Blackjack Table(桌子)、Cards(紙牌)、Gambling Chips(籌碼)和Scores(分數)等等。
注意,這一節會很長,一次過介紹全個製作,大家可以在本節尾部下載Adobe Illustrator的Blackjack Table檔案。
BlackJack的草圖
首先我們可以用紙筆設計我們心目中的Blackjack遊戲畫面,如下圖:
Adobe Illustrator - BlackJack的完成圖片
用Adobe Illustrator製作BlackJack的圖片,我會在下幾節詳細介紹:
注意,圖片製作是參考http://tutsplus.com。
開始製作:
第1部分
- 建立新檔案,大小為1024x768 px。
第2部分
- 選擇Rectangle Tool。
- 設定大小為1024x30 px。
- 設定顏色。
- 把剛剛完成的圖片合併在一起。
第3部分
- 選擇Rectangle Tool。
- 設定大小為1024x40 px。
- 設定顏色。
- 選擇Rectangle Tool。
- 設定字型、字型粗幼和字型大小。
- 設定顏色。
- 設定Drop Shadow,Y Offset=1代表Shadow向下,再設定Shadow顏色。
- 選擇Rectangle Tool。
- 設定大小為1024x1 px。
- 因為我們想建立一個比底色較深的顏色,所以我們可以把圓圈向下移動,如上圖。
- 選擇Rectangle Tool。
- 設定大小為1024x2 px。
- 因為我們想建立一個比底色較淺的顏色,所以我們可以把H值加大約22。
- 再把圓圈向上移動,如上圖。
- 把剛剛完成的圖片合併在一起。
- 再把剛剛完成的圖片合併在一起。
第4部分
- 選擇Rectangle Tool。
- 設定大小為1024x698 px。
- 設定顏色。
- Add New Fill,再設定Fill的Gradient,設定顏色和Opacity=50% Overlay。
- Add New Fill,設定顏色,再在Menu中選擇Effect>Effect Gallery>Film Grain和Opacity=8% Multiply。
- Add New Fill,設定顏色,再在Menu中選擇Effect>Effect Gallery>Sponge和Opacity=10% Multiply。
- 選擇Rectangle Tool。
- 設定大小為400x55 px。
- 設定顏色。
- 選擇Rectangle Tool。
- 設定大小為60x60 px。
- 設定顏色。
- 選擇Add Anchor Point Tool,在正方形的左面中間位置加上一粒狀Anchor Point。
- 選擇Direct Selection Tool,選擇左面中間剛剛新增的Anchor Point。
- 向左移動20 px。
- 選擇Rectangle,再在Menu中選擇Object>Transformer>Reflect。
- 按Copy鍵,複製一個反映圖像。
- 把三個圖像放在如圖位置。
- 選擇左邊二個圖像。
- ^代表鍵盤的話Control鍵,Control C代表Copy,而Control V代表Paste,則是複製一次的意思。
- 選擇Minus Front。
- 選擇右邊二個圖像。
- ^代表鍵盤的話Control鍵,Control C代表Copy,而Control V代表Paste,則是複製一次的意思。
- 選擇Minus Front。
最後,把三個圖像放在如圖位置。
- 選擇Type Tool。
- 設定字型、字型粗幼和字型大小。。
- 設定Opacity=70% Overlay。
- 選擇圖片和所有文字,再在Menu中選擇Effect>Warp>Arc,再設定Warp Options的值。
- 選擇Rectangle Tool。
- 設定大小為100x100 px。
- 選擇No Fill。
- 設定Opacity=70% Overlay。
- 設定四個角的Radius = 10 px。
- 設定Stroke(邊線)=3px,inside,再設定Stroke(邊線)的顏色。
- 把剛剛完成的圖片合併在一起。
第5部分
- 選擇Rectangle Tool。
- 設定大小為1024x80 px。
- 設定Fill的Gradient和顏色。
- 選擇Rectangle Tool。
- 設定大小為1024x2 px。
- 因為我們想建立一個比底色較深的顏色,所以我們可以把圓圈向下移動,如上圖。
- 選擇Rectangle Tool。
- 設定大小為1024x1 px。
- 因為我們想建立一個比底色較淺的顏色,所以我們可以把H值加大約22。
- 再把圓圈向上移動,如上圖。
- 設定Opacity=100% Overlay。
- 把剛剛完成的圖片合併在一起。
第6部分
- 選擇Rectangle Tool。
- 設定大小為100x40 px。
- 設定顏色。
- 首先選擇Rectangle,再在Menu中選擇Effect>Stylize>Round Corners。
- 把握Radius設定為5px。
- 選擇Rectangle,再在Menu中選擇Object>Expand Appearance。
- 選擇Rectangle,再在Menu中選擇Object>Path>Offset Path。
- 設定Offset Path=-2。
注意,Offset Path不是把原本的Rectangle縮小,而是會自動產生一個新的Rectangle。
- ^代表鍵盤的話Control鍵,Control C代表Copy,而Control F代表Paste in Front,則是在正前方複製兩次的意思。
Path就會在正前方複製兩次。
- 選擇最上層的Path。
- 按鍵盤向下鍵兩次,,則向下2 px。
- 按鍵盤Shift鍵再選擇第二層的Path,現在已選擇了二層的Path。
- 在Pathfinder按Minus Front,把兩個Path物件相減。
- 把兩個Path物件相減後,會產生一個Path物件。
- 設定顏色。
- 選擇下一層的Path,則原本的話Rectangle。
- ^代表鍵盤的話Control鍵,Control C代表Copy,而Control F代表Paste in Front,則是在正前方複製兩次的意思。
- Path就會在正前方複製兩次。
- 選擇最上層的Path。
- 按鍵盤向下鍵五次,,則向下5 px。
- 按鍵盤Shift鍵再選擇第二層的Path,現在已選擇了二層的Path。
- 在Pathfinder按Minus Front,把兩個Path物件相減。
- 設定Fill的Gradient和顏色。
- 設定Fill的Gradient和顏色。
- 選擇剛剛產生的圖形。
- ^代表鍵盤的話Control鍵,Control C代表Copy,而Control F代表Paste in Front,則是在正前方複製一次的意思。
- 用Rotate Tool把圖形迴轉180度,再放置在下方,如上圖。
- 把原本的Rectangle暫時拉出。
- 設定Stroke(邊線)=2px,inside,再設定Stroke(邊線)的顏色。
- 設定Stroke(邊線)的Opacity=20%。
- Appearance Panel如上圖。
- Add New Stroke,設定Stroke(邊線)=1px,inside,再設定Stroke(邊線)的顏色和設定Opacity=20%。
- 選擇Rectangle Tool。
- 設定Fill的Gradient和顏色。
- 設定Fill的Gradient和顏色。
- 設定Opacity=50% 。
- 選擇上方較小的Rectangle,並按鍵盤的delete鍵,把較小的Rectangle刪除。
- 最後把它們合併。
- 選擇Type Tool。
- 設定字型、字型粗幼和字型大小,再製作四種植Button。
- 把剛剛完成的圖片合併在一起。
第7部分
- 選擇Rectangle Tool。
- 設定大小為158x30 px。
- 設定Drop Shadow,Y Offset=1.5代表Shadow向下,再設定Shadow顏色。
- 設定Fill的Gradient和顏色。
- 設定Stroke(邊線)=3 px,inside,再設定Stroke(邊線)的顏色。
- Add New Stroke,設定Stroke(邊線)=1.5 px,inside,再設定Stroke(邊線)的顏色。
- 設定四個角的Radius = 4.5 px。
- 選擇Type Tool。
- 設定字型、字型粗幼和字型大小。
- 選擇Type,再在Menu中選擇Create Outlines。
- 選擇Type,再在Menu中選擇Object>Compound Path>Make。
- 設定Fill的Gradient和顏色。
- 設定Drop Shadow,Y Offset=-1代表Shadow向上,再設定Shadow顏色。
- 設定Drop Shadow,Y Offset=1代表Shadow向下,再設定Shadow顏色。
- 把剛剛完成的圖片合併在一起。
第7部分
- 選擇Rectangle Tool。
- 設定大小為500x30 px。
- 設定顏色。
- 選擇Rectangle,再在Menu中選擇Effect>Stylize>Round Corners。
- 設定四個角的Radius = 3 px。
- 選擇Rectangle,再在Menu中選擇Object>Expand Appearance。
- 選擇最上層的Path。。
- ^代表鍵盤的話Control鍵,Control C代表Copy,而Control F代表Paste in Front,則是在正前方複製兩次的意思。
Path就會在正前方複製兩次。 - 按鍵盤向上鍵一次,則向上1 px。
- 按鍵盤Shift鍵再選擇第二層的Path,現在已選擇了二層的Path。
- 在Pathfinder按Minus Front,把兩個Path物件相減。
- 選擇Rectangle Tool。
- 設定顏色。
- 選擇Rectangle Tool。
- 設定Fill的Gradient和顏色。
- 設定Opacity=80% Color Burn。
- Add New Fill。
- 設定Fill的Gradient和顏色。
- Add New Fill。
- 設定Fill的Gradient和顏色。
- 設定Stroke(邊線)=1 px,inside,再設定Stroke(邊線)的顏色。
- 把剛剛完成的圖片合併在一起。
第8部分
- 選擇Rectangle Tool。
- 設定大小為1x30 px。
- 設定Fill的Gradient和顏色。
- 選擇Rectangle Tool。
- 設定大小為4x30 px。
- 設定顏色。
- 選擇Rectangle Tool。
- 設定大小為4x1 px。
- 設定顏色和Opacity=15%。
- 選擇Rectangle Tool。
- 選擇Rectangle Tool。
- 設定顏色。
- 選擇Rectangle Tool。
- 設定大小為4x6 px。
- 設定顏色。
- 設定顏色。
- 設定顏色。
- 選擇Rectangle Tool。
- 設定大小為1x30 px。
- 設定Fill的Gradient和顏色。
- 把剛剛完成的圖片合併在一起。
- 設定Fill的Gradient和顏色。
- 把剛剛完成的圖片合併在一起。
- 設定Fill的Gradient和顏色。
- 把剛剛完成的圖片合併在一起。
- 設定Fill的Gradient和顏色。
- 把剛剛完成的圖片合併在一起。
- 設定Fill的Gradient和顏色。
- 把剛剛完成的圖片合併在一起。
- 設定Fill的Gradient和顏色。
- 把剛剛完成的圖片合併在一起。
- 選擇Rectangle,再在Menu中選擇Effect>Distort & Transform>Transform。
- 設定Transform Effect值。
- 把剛剛完成的圖片合併在一起。
第9部分
- 選擇Ellipse Tool。
- 設定大小為40x40 px。
- 設定Stroke(邊線)=7 px,inside,再設定Stroke(邊線)的顏色。
- 選擇Rectangle,再在Menu中選擇Object>Path>Outline Stroke。
- 選擇Line Segment Tool。
- 建立兩條十字線,按照Mouse右鍵,選擇Group把它們合併。
- 選擇Rectangle,再在Menu中選擇Object>Transformer>Rotate。
- 設定Rotate值。
- 選擇Rectangle,再在Menu中選擇Object>Transformer>Rotate。
- 設定Rotate值。
- 建立所有線,按照Mouse右鍵,選擇Group把它們合併。
- 在於Pathfinders內,選擇Divide。
- 按照Mouse右鍵,選擇Ungroup把它們分析。
- 把不須要部分刪除。
- 選擇圖片的四個部分,設定顏色為白色。
- 選擇剛剛完成的四個白色部分。
- 設定Offset Path=-1 px和Opacity=5%。
- 選擇Ellipse Tool。
- 設定大小為42x42 px。
- 設定Stroke(邊線)=1 px,再設定Opacity=10%。
- 把剛剛完成的圖片合併在一起。
- 選擇Ellipse Tool。
- 設定大小為38x38 px。
- 設定顏色。
- 選擇最上層的Path。^代表鍵盤的話Control鍵,Control C代表Copy,而Control F代表Paste in Front,則是在正前方複製一次的意思。
Path就會在正前方複製一次。 - 按鍵盤向下鍵一次,則向下1 px。
- 按鍵盤Shift鍵再選擇第二層的Path,現在已選擇了二層的Path。
- 在Pathfinder按Minus Front,把兩個Path物件相減。
- 設定Fill的顏色為白色和Opacity=50%。。
- 把剛剛完成的圖片合併在一起。
- 選擇Rectangle Tool。
- 設定大小為26x26 px。
- 設定Fill的Gradient和顏色。
- 把剛剛完成的圖片合併在一起。
- 選擇Ellipse Tool。
- 設定大小為26x26 px。
- 設定Stroke(邊線)=2 px,再設定Stroke(邊線)的顏色為黑色。
- 設定Drop Shadow,Y Offset=1代表Shadow向下,再設定Shadow顏色。
- 把剛剛完成的圖片合併在一起。
- 選擇Type Tool。
- 設定字型、字型粗幼和字型大小。
- 選擇Text,再在Menu中選擇Type>Create Outlines。
- 選擇Text,再在Menu中選擇Object>Compound Path>Make。
- 設定Fill的Gradient和顏色。
- 設定Drop Shadow,Y Offset=1代表Shadow向下,再設定Shadow顏色。
- 設定Drop Shadow,Y Offset=-1代表Shadow向上,再設定Shadow顏色。
- 把剛剛完成的圖片合併在一起。
- 按照Mouse右鍵,選擇Ungroup把它們分析。
- 選擇每一個部分。
- 設定顏色。
- 設定顏色。
- 設定顏色。
- 設定顏色。
- 設定顏色。
- 把剛剛完成的圖片合併在一起。
第10部分
- 選擇Rectangle Tool。
- 設定大小為300x212 px。
- 設定Fill的Gradient和顏色。
- 選擇Add New Fill。
- 設定Fill的Gradient和顏色。
- 設定Fill的Opacity=15%。
- 選擇Add New Fill,再新增一個Fill,設定Fill的顏色。
- 選擇Rectangle,再在Menu中選擇Effect>Artistic>Colored Pencil,再設定Colored Pencil的數值。
- 設定Fill的Opacity=5% Multiply。
- 選擇Rectangle Tool。
- 設定大小為34x152 px。
- 設定Fill的Gradient和顏色。
- 選擇Rectangle,再在Menu中選擇Effect>Stylize>Round Corners。
- 設定四個角的Radius=3 px。
- 選擇Rectangle,再在Menu中選擇Effect>Stylize>Inner Glow。
- 設定Inner Glow的數值。
- 設定Stroke(邊線)=3x,inside,再設定Stroke(邊線)的顏色。
- 設定Stroke(邊線)的Opacity=10% 。
- 選擇Rectangle,再在Menu中選擇Effect>Stylize>Drop Shadow。
- 設定Drop Shadow,Y Offset=1代表Shadow向下,再設定Shadow顏色。
- 選擇Rectangle,再在Menu中選擇Effect>Stylize>Drop Shadow。
- 設定Drop Shadow,X Offset=-1代表Shadow向左。,再設定Shadow顏色。
- 選擇Rectangle,再在Menu中選擇Effect>Distort & Transform>Transform。
- 新增五個Rectangle,每個相距38 px,則否copy=5, Move Horizontal=38 px。
- 選擇Direct Selection Tool。
- 選擇圖片下方的兩個角。
- 按鍵盤Shift鍵可以連續選擇。
- 在Menu中選擇Other Scripts,選擇已下載完成的Round Any Corner.js。
- 設定Radius=10 px。
- 選擇最上層的Path。。
- ^代表鍵盤的話Control鍵,Control C代表Copy,而Control F代表Paste in Front,則是在正前方複製兩次的意思。
Path就會在正前方複製兩次。
- 選擇最上層的Path。
- 按鍵盤向上鍵一次,則向上1 px。
- 按鍵盤Shift鍵再選擇第二層的Path,現在已選擇了二層的Path。
- 在Pathfinder按Minus Front,把兩個Path物件相減。
- 把Fill的的所有設定刪除,再設定Fill的顏色。
- 按鍵盤向上鍵兩次,則向上2 px。
- 把剛剛完成的圖片合併在一起。
第11部分
- 選擇Rectangle Tool。
- 設定大小為102x152 px。
- 選擇Direct Selection Tool。
- 選擇圖片下方的兩個角。
- 按鍵盤Shift鍵可以連續選擇。
- 在Menu中選擇File>Scripts>Other Scripts,選擇已下載完成的Round Any Corner.js。
- 設定Radius=5 px。
- 選擇Rectangle。^代表鍵盤的話Control鍵,Control C代表Copy,而Control F代表Paste in Front,則是在正前方複製兩次的意思。
Path就會在正前方複製兩次。 - 選擇最上層的Path。
- 按鍵盤向上鍵一次,則向上1 px。
- 按鍵盤Shift鍵再選擇第二層的Path,現在已選擇了二層的Path。
- 在Pathfinder按Minus Front,把兩個Path物件相減。
- 設定Fill的顏色。
- 按鍵盤向上鍵兩次,則向上2 px。
- Add New Fill,再設定Fill的Gradient和顏色。
- Add New Fill,再設定Fill的Gradient和顏色。
- 在Menu中選擇Effect>Artistic>Colored Pencil,再設定Colored Pencil的數值。
- 設定Opacity=5% Multiply。
- 設定Stroke(邊線)=1 px,inside,再設定Stroke(邊線)的顏色為黑色。
- 選擇Rectangle Tool。
- 設定大小為88x115 px。
- 選擇Rectangle,再在Menu中選擇Effect>Stylize>Round Corners。
- 選擇Ellipse Tool。
- 設定大小為30x14 px。
- 選擇剛剛完成的兩個圖片。
- 在Pathfinder按Minus Front,把兩個Path物件相減。
- 設定Fill的Gradient和顏色。
- 選擇Rectangle,再在Menu中選擇Effect>Stylize>Inner Glow,並設定Inner Glow的值。
- 設定Drop Shadow,Y Offset=-1代表Shadow向上,再設定Shadow顏色。
- 設定Drop Shadow,Y Offset=1代表Shadow向下,再設定Shadow顏色。
- 設定Stroke(邊線)=3 px,inside,再設定Stroke(邊線)的顏色為黑色,再設定Opacity=10%。
- 完成圖片。
- 把剛剛完成的圖片合併在一起。
第12部分
- 選擇Rectangle Tool。
- 設定大小為56x82 px。
- 設定Fill的Gradient和顏色。
- 設定四個角的Radius = 4 px。
- 選擇Rectangle,再在Menu中選擇Object>Path>Offset Path。
- 選擇Rectangle Tool。
- 設定Fill的Gradient和顏色。
- 選擇Rectangle,再在Menu中選擇Object>Path>Offset Path。
- 選擇Rectangle Tool。
- 設定顏色。
- 選擇Rectangle Tool。
- 設定大小為2x3 px。
- 設定顏色。
- 設定顏色。
- 選擇Rectangle Tool。
- 選擇Rectangle,再在Menu中選擇Object>Path>Offset Path。
- 把Swatches內自建的圖案拉入Rectangle內。
- 選擇Rectangle,再在Menu中選擇Effect>Distort & Transform>Transform,並設定Transform Effect的值。。
- 把剛剛完成的圖片合併在一起。
- 再把剛剛完成的圖片合併在一起。
第13部分
- 以上紙牌圖片不會在這樣介紹,因為在網上有很多這類的圖片下載。大家也可以在本節尾部下載。