PS教程banner游戲?qū)ｎ}運(yùn)營設(shè)計

1、本文檔為精品文檔， 如對你有幫助請下載支持， 如有問題請及時溝通， 謝謝支持！PS教程| hao123 游戲運(yùn)營Banner設(shè)計【概要】：本文的主要內(nèi)容是教大家從無到有構(gòu)思、設(shè)計好一個游戲運(yùn)營專題頁 頂部的主題banner,內(nèi)容涵蓋思維、技法及軟件操作。在運(yùn)營專題里盤點(diǎn)類的 頻率非常高，做一個匯總類的長專題就要求我們的 banner視覺也必須和這種主 題環(huán)環(huán)相扣，從而讓人眼前一亮，過目不忘?！緝?nèi)容框架】：1 .需求分析及提煉要點(diǎn)2 .構(gòu)圖形式&空間&風(fēng)格的確定3 .尋找素材4 .確立整體的視覺風(fēng)格與色調(diào)5 .確立光源與光照效果6 .PS+AI操作執(zhí)行【使用軟件】；AI+PS【設(shè)

2、計難度】：【最終效果圖】：【創(chuàng)作過程（從思維到技法）1:1 .需求分析及提煉要點(diǎn)首先分析一下此次的話題，它的主要詞語是“4宗罪”，我們知道，犯罪是一種過失表現(xiàn)，也是許多游戲系玩家的內(nèi)容，而我們的目的是將它的實際意義與趣味 性相結(jié)合，從而達(dá)到一個有意思的反差效果。2 .構(gòu)圖形式&空間&風(fēng)格的確定這樣一張其貌不揚(yáng)的圖，其實大有乾坤，代表著整個的設(shè)計思路。在明確了我們的目的之后，我們要做的就是基礎(chǔ)分析與風(fēng)格的確定。 這次設(shè)計采 用了一個四層發(fā)散式的構(gòu)成處理，第一層的三角層是與下面內(nèi)容的銜接層，第二 層是主要角色層，可以把一些游戲角色放在這個層里， 該層放置的內(nèi)容奠定了整 個banne

3、r的基調(diào)，第三層是主、副標(biāo)題的標(biāo)題層，第四層是其他的次要角色層， 最后就是背景層。所有從中心像四周散發(fā)的線條就是要做一個由中心向四周發(fā)光 的視覺效果，這時候我們在腦海之中已經(jīng)形成了對該BANNE的一整體設(shè)想，這樣一個草圖，讓我們在后期完善設(shè)計的同時不至于偏離航線，并且在整體的空間把我上游刃有余。構(gòu)圖&空間3.尋找素材一是選擇角色兩個跟犯罪題材比較相關(guān)的兩個人物（由大型游戲里面提取而出）， 手持鏈條與木棒的男生，被逮捕的美女。二是以及其他一些次要角色，因為是盤點(diǎn)專題，肯定有不是完全犯罪的角色的出 現(xiàn)。三是我們需要一些輔助的圖形，比如說這些筆刷，然后還有這些破舊的紋理，當(dāng) 然這些素材你在網(wǎng)

4、上很容易找到。四是背景素材。比如說一些陰暗的城堡，一些遠(yuǎn)山、云霧，以及一些邪惡的龍等 等。4 .確立整體的視覺風(fēng)格與色調(diào)進(jìn)一步豐富上一步的抽象圖形，主要素材與配圖可以試著擺放，文字的色調(diào)設(shè)想 為紅黑配，突出犯罪的整體調(diào)性。背景與次要級配圖都用冷色調(diào)， 冷暖對比會讓 人的視覺上更有一種犀利的感覺。5 .確立光源與光照效果因為字體在整體設(shè)計里占到的視覺比例非常大，所以它的細(xì)節(jié)一定要處理好才能 奪人眼球。如圖所示，“4”處于畫面的中心點(diǎn)，是一個主光源與主視覺的發(fā)散點(diǎn)， 由它散發(fā)出來的光會直接影響到它旁邊的字體與素材，它們的視覺與效果處理由光源決定。6 .PS+AI操作執(zhí)行6.1 設(shè)計主標(biāo)題（主視覺）

5、在絕大多數(shù)專題banner設(shè)計里，字體的形態(tài)風(fēng)格、創(chuàng)意，對整個視覺的走向都是 舉足輕重的。那么對字體的處理，我們應(yīng)該如何思考，又應(yīng)該怎么做呢？該banner 設(shè)計中，我們把重心放在主標(biāo)題的字體設(shè)計中， 首先讓我們來預(yù)覽一下主標(biāo)題的 最終的效果：6.1.1 前期構(gòu)思這樣一個文字是怎么設(shè)計出來的呢？我們一起來看一下這張圖：這張圖就表明了這次設(shè)計，字形的整體安排，就是以4為一個主要的中心點(diǎn)，然后其他的字都圍繞著4做了一個空間的變化。（小貼士：阿拉伯?dāng)?shù)字的1到10都非常適于做設(shè)計的變化，把它單獨(dú)提取出來，作為整個視覺的中心點(diǎn)是很常用的小技巧。 且這次文案是由五個字組成，中間這 個4正好處于中間位置，所

6、以就讓4作為畫面中心位置的出現(xiàn)，其它字圍繞著 4做 一個空間的變化。）6.1.2 PS+AI執(zhí)行環(huán)節(jié)確定了字的整體的形態(tài)，之后就綜合利用AI與PS勺優(yōu)勢，非常有規(guī)律的朝著這個 方向來做就好了。新建與準(zhǔn)備。在AI中新建畫布，寬度高度都設(shè)置為1000px, RGB 72分辨率。用微軟雅黑的字形來輔助做一個完全屬于自己的字體。 把微軟雅黑選中，把透明 度改成20,讓它到達(dá)一種比較朦朧的狀態(tài)，這樣就不妨礙在它上面作畫了。 然后 打上“暑假4宗罪”，快捷鍵" Command2”把它鎖在畫布上。整體描單。以“暑”字為例，用鋼筆工具在字體上整體描摹一遍，現(xiàn)在這個字形看起來還是很單薄的，但是這已經(jīng)是

7、完全由你自己來繪制的字體了，已經(jīng)完全脫離了系統(tǒng)原本自帶字體的束縛，有你自己的風(fēng)格存在了。進(jìn)一步的細(xì)化與形體修正。描邊加粗為9pt,然后選擇對象-擴(kuò)展-填充、描邊-確定，轉(zhuǎn)化為形狀。全部的筆畫進(jìn)行一個簡單的對齊， 讓字看起來更規(guī)矩、更大氣，也為之后做的透 視效果做準(zhǔn)備。對它進(jìn)行一個橫豎筆畫的粗細(xì)變化。耐心調(diào)整，讓這些筆畫之間的關(guān)系更加緊湊， 設(shè)計感更強(qiáng)。按照同樣的方法，整體繪制一遍：（注意：讓每個字的大小保持一致。因為這個字體要做的效果是要圍繞“4”做一個空間上的轉(zhuǎn)變，那什么樣的東西做空間轉(zhuǎn)變會更加明顯呢？越規(guī)矩的圖形或 者物體做這種三維上的轉(zhuǎn)換，就越直觀、越容易被人接受。所以可以用矩形工具 測

8、量一下，使用同樣大小的矩形，讓它們的大小、高度、寬窄都保持一致。） 字形的效果繪制。打開Photoshop,新建一個文檔1920PxX700px勺空白的畫布，把之前設(shè)定的字體 草圖植入到畫布里，設(shè)置透明度為20面鎖定。把在AI中做的“暑假”、“4”、“宗罪”分別粘貼到PSB布之中，粘貼選項選擇第四項“形狀圖層”。按住“CommandT”鍵自由變換，將“暑假”做一個比較有透視形態(tài)的感覺?！笆罴佟彼椒D(zhuǎn)鏡像到右側(cè)，來確定右邊的“宗罪”的位置，做到完全對稱的 效果。路徑重導(dǎo)。把我們剛才已經(jīng)經(jīng)過變形完成的，按住“Shift ”全選它們，然后再按住“ Command E”鍵進(jìn)行合并。路徑選擇工具對所有

9、的路徑進(jìn)行全選，然后粘貼到 AI中，粘貼選項選擇第一個“復(fù)合形狀”，填充黑色。繼續(xù)添加細(xì)節(jié)。添加“罪”的元素，如破舊感、尖銳感等。使用鋼筆工具，在文字的各個的筆畫處添加一部分針絲的效果。（注意：它這個效果發(fā)散的中心點(diǎn)還是由“ 4”來展開與發(fā)散；把握好節(jié)奏與疏 密；添加的毛刺的效果需要與它的平面相切，這樣才會平滑不突兀）制作一點(diǎn)開裂。把顏色設(shè)定成白色，鋼筆工具每個字的某些角落里，添加一部分 破損的紋理。（注意：時刻的審視整體的感覺和效果，調(diào)整每一個肌理的位置，讓它與整個畫 面更協(xié)調(diào)，不要為了細(xì)節(jié)而畫細(xì)節(jié)；不斷對比，以保證每筆破損更加真實、更加 逼真）打開窗口里面的路徑查找器，將所有的黑色的小形狀

10、加上，將所有的白色的小形 狀減去，完成主標(biāo)題的字體設(shè)計。6.2 整體視覺設(shè)計使用直接選擇工具將AI中已經(jīng)設(shè)計好的文字“ 4”、“暑假宗罪”分別導(dǎo)入到 PS中1920X700的畫布上，調(diào)整好它的位置與大小如下圖所示。分批輸入副標(biāo)題，綜合利用自由變換、放大縮小、位置調(diào)整等，重點(diǎn)突出并且讓整體看起來活潑生動。組合排列效果如下：注意：一定要讓這些文字和單詞成塊狀存在， 并且與這個主標(biāo)題盡量形成一些關(guān) 系，這樣在大關(guān)系上就不至于分散。根據(jù)前期的設(shè)定，主標(biāo)題的色調(diào)為紅色，因此我們現(xiàn)在進(jìn)行一個色調(diào)的處理，“4” 作為主光源先處理成白色，拉開色彩主次關(guān)系。根據(jù)之前的設(shè)定，文字背景為黑色，所以我們使用鋼筆工具繪

11、制一個背景。注意：遵循從中心向四周發(fā)散的構(gòu)圖原則，同時兼顧副標(biāo)題；先整體繪制，再細(xì) 節(jié)調(diào)整；注意把握突角的節(jié)奏，有長有短有粗有細(xì)，避免單調(diào)。先前已經(jīng)把“ 4”設(shè)置成了主光源，所以現(xiàn)在來模擬光照的效果，給 4設(shè)置一個 外發(fā)光的效果，其他文字受到光源的影響可以分別進(jìn)行一個受光面的高光繪制。注意：高光的添加要有規(guī)律，不要到處都是；離主光源較近的部分受光較強(qiáng)烈，高光范圍相對要較大，反之要較??；與前面的主人像相交的部分不添加高光。因為副標(biāo)題屬于次要級別的視覺中心，所以它們的受光面相對要簡單、暗一些。這樣的好處是不會搶了主標(biāo)題的視覺，也比較整體不瑣碎。可在網(wǎng)上找到破舊的肌理圖案， 通過建立創(chuàng)建剪貼蒙版的方式來一一添加， 不斷地添加與調(diào)整位置。注意： 添加紋理的規(guī)律和高光類似； 注意整體畫面的節(jié)奏感， 如在這個位置添加了，在它對面的位置就不要添加了。使用毛筆筆刷的素材，整體添加遍細(xì)節(jié)的紋理。將之前找到的龍、城堡、遠(yuǎn)山分別植入，調(diào)整它們的色調(diào)與對比度，新建蒙版，使用比較模糊的畫筆抹去不必要的部分，調(diào)整疊加方式，使用“疊加”或者“正片疊底”等來融合與統(tǒng)一。使用經(jīng)過處理的筆刷，綜合調(diào)整顏色、透明度、疊加方式、位置等，直到達(dá)到自己滿意的效果為止。根據(jù)自己的喜好和畫面的需要，自由選擇一些素材，置入背景層。最好有一、兩個角色在文字的上面壓一下，可以讓畫面看起來更加活潑生動。