天津博奧教育首頁>天津博奧教育培訓(xùn)課程學(xué)習(xí)輔助資料>網(wǎng)頁設(shè)計(jì)培訓(xùn)就業(yè)輔導(dǎo)學(xué)習(xí)資料>網(wǎng)頁制作中的網(wǎng)頁設(shè)計(jì)切割效果圖
注重實(shí)戰(zhàn)經(jīng)驗(yàn)傳授，打造視覺設(shè)計(jì)精英
視覺設(shè)計(jì)培訓(xùn)天津博奧教育全新五合一教學(xué)模式線上下同時(shí)授課
1.十多年教學(xué)經(jīng)驗(yàn)，由視覺設(shè)計(jì)行業(yè)專家授課
2.視覺設(shè)計(jì)采用WORKSHOP授課方式，更好吸收教學(xué)內(nèi)容
3.有問題可以隨時(shí)提出，不積壓問題及時(shí)解決問題
4.視覺設(shè)計(jì)培訓(xùn)學(xué)習(xí)期滿后可推薦就業(yè)
5.在工作中遇到技術(shù)或者設(shè)計(jì)上的問題給予免費(fèi)指導(dǎo)
6.視覺設(shè)計(jì)培訓(xùn)課程可免費(fèi)重修
天津平面設(shè)計(jì)培訓(xùn)分類
天津平面設(shè)計(jì)培訓(xùn)就業(yè)實(shí)操課程不單專業(yè)講解PS_AI_CDR_ID平面設(shè)計(jì)軟件的使用方法及設(shè)計(jì)的實(shí)用技巧,并要讓學(xué)生認(rèn)識設(shè)計(jì)軟件的基本工作原理和將創(chuàng)意設(shè)計(jì)呈現(xiàn)的方法,利用平面廣告設(shè)計(jì)經(jīng)典案例讓學(xué)生把握在商業(yè)性平面廣告設(shè)計(jì)有關(guān)的領(lǐng)域中的應(yīng)用特性、制作方法步驟、拓展學(xué)生的平面廣告設(shè)計(jì)構(gòu)思,提升學(xué)生的現(xiàn)實(shí)實(shí)踐經(jīng)驗(yàn),提升自主的設(shè)計(jì)的工作能力,在培訓(xùn)中注入較多的項(xiàng)目拓展成功案例和印刷前制作方法步驟及實(shí)用技巧和印刷后工藝,使其更深層次的達(dá)到工作實(shí)操的要求，并擁有自主進(jìn)行各類平面廣告設(shè)計(jì)項(xiàng)目的工作能力,學(xué)好后可任職平面媒體、廣告創(chuàng)意設(shè)計(jì)師、美術(shù)編輯、印前工程師、數(shù)碼打印高工、圖像合成與制作師、網(wǎng)站美工等
室內(nèi)設(shè)計(jì)培訓(xùn)高端培訓(xùn)班9月余2人
室內(nèi)設(shè)計(jì)培訓(xùn)效果圖培訓(xùn)班9月余2人
CAD培訓(xùn)室內(nèi)設(shè)計(jì)CAD制圖培訓(xùn)班9月余2人
su培訓(xùn)三維家具設(shè)計(jì)培訓(xùn)班9月余4人
天津辦公軟件培訓(xùn)Word、Excel、PPT培訓(xùn)班9月余2人
SolidWorks培訓(xùn)班9月余2人
-
室內(nèi)設(shè)計(jì)中的16條注意小小的事項(xiàng)_學(xué)室內(nèi)設(shè)計(jì)懂裝修常識
-
累人累機(jī)器的室內(nèi)設(shè)計(jì)效果圖的Vray渲染流程第二篇，切記秘籍勿忘2023年25條室內(nèi)設(shè)計(jì)裝修小知識經(jīng)典珍藏讓生活便利的室內(nèi)設(shè)計(jì)知識累人累機(jī)器的室內(nèi)設(shè)計(jì)效果圖的Vray渲染流程第一篇，切記秘籍勿忘輕裝修，重裝飾室內(nèi)設(shè)計(jì)中珠簾風(fēng)潮卷土重來_學(xué)室內(nèi)設(shè)計(jì)懂裝修工藝“我我我”急不可耐推銷是室內(nèi)設(shè)計(jì)談單的秘籍資深室內(nèi)設(shè)計(jì)師從不講的臥室設(shè)計(jì)空間擺放的要點(diǎn)寬敞舒適是現(xiàn)代室內(nèi)設(shè)計(jì)臥室的風(fēng)格把小臥室設(shè)計(jì)的寬敞要注意什么小空間大設(shè)計(jì)讓室內(nèi)設(shè)計(jì)中的小臥室寬敞_天津博奧教育室內(nèi)設(shè)計(jì)培訓(xùn)高端課程
培訓(xùn)咨詢電話：
022-58697923
022-58697932
18222233399
天津平面設(shè)計(jì)培訓(xùn)視覺設(shè)計(jì)培訓(xùn)精品設(shè)計(jì)培訓(xùn)課程推薦
天津平面設(shè)計(jì)培訓(xùn)就業(yè)實(shí)戰(zhàn)班
高端天津平面設(shè)計(jì)培訓(xùn)課程
UI設(shè)計(jì)師培訓(xùn)一對一
天津平面設(shè)計(jì)軟件培訓(xùn)
天津平面設(shè)計(jì)C4D培訓(xùn)
網(wǎng)頁制作中的網(wǎng)頁設(shè)計(jì)切割效果圖
本文章摘自天津平面設(shè)計(jì)培訓(xùn)全程實(shí)例教學(xué)小班精講十多年教學(xué)經(jīng)驗(yàn)的天津博奧教育官網(wǎng)psnx.com.cn
天津博奧教育培訓(xùn)為學(xué)生提供最專業(yè)的網(wǎng)頁設(shè)計(jì)培訓(xùn)，今天就從建站的流程為學(xué)員講解div+css布局標(biāo)準(zhǔn)教程：
建立站點(diǎn)
結(jié)構(gòu)分析
搭建框架
切割效果圖
布局頁面——頭部和導(dǎo)航
布局頁面——側(cè)邊欄
布局頁面——主體部分
底部和細(xì)節(jié)調(diào)整
相對路徑和相對于根目錄路徑
基本框架搭建完畢后，下一步就是要分析每一塊該怎么切圖了。切圖方法有多種，可以使用ps或fireworks自帶的切片工具，也可以用QQ的截屏或者創(chuàng)建新文件，把需要的部分復(fù)制過來保存都可以，關(guān)鍵看個(gè)人喜好了。
用ps的切片工具的話，把需要切割的區(qū)域用切片工具切分，如果要設(shè)置圖片的名稱，請使用切片選擇工具，然后在切片上雙擊，會彈出如下窗口，填寫名字后確定即可。
切割完后，需要保存圖片了，選擇文件——存儲為web和設(shè)備所用格式，在彈出的窗口中點(diǎn)擊選中切片，然后在右側(cè)可以設(shè)置當(dāng)前切片的圖片格式。這里有個(gè)技巧，一般小型色彩單一的圖片，采用gif格式，照片類大型圖片采用jpg，這樣生成的圖片既能保證質(zhì)量，圖片體積又小。
設(shè)置完圖片的格式后，就可以存儲了，這里選擇到images的上一級目錄就行了，ps會自動創(chuàng)建images目錄并把圖片文件放入，如果已存在，直接放入。在格式處選擇僅限圖像，如果選擇html和圖像，ps會自動生成一個(gè)表格式的網(wǎng)頁，這個(gè)頁面不是我們需要的，就不讓它生成了；還有一個(gè)需要注意的地方就是選擇所有用戶切片，這樣只把我們手動切割的圖片保存下來，其它的就不保存了。保存后的圖片如下所示，其中hot_bg.gif這張圖片切割時(shí)沒有隱藏上邊的文字，一會兒在ps里再處理一下把文字抹掉。
目前所切的圖片只是一部分，并沒有把整個(gè)頁面所需的圖片全都切割下來，比如導(dǎo)航部分所用背景圖片可以放到一張圖片上，下面就用新建文件，然后用QQ截屏，粘貼過去的方法來創(chuàng)建。
分析一下上圖的導(dǎo)航部分：1、兩端的圓角；2、鼠標(biāo)劃過狀態(tài)和當(dāng)前欄目狀態(tài)寬度應(yīng)該隨著字?jǐn)?shù)的多少而改變；3、二級導(dǎo)航有鼠標(biāo)劃過時(shí)的狀態(tài)。分析完之后，就需要把需要的圖片整合到一張圖片上了，整合的結(jié)果如下圖，這個(gè)根據(jù)自己的需要進(jìn)行整合。其實(shí)完全可以把其它一些小圖標(biāo)都整合在一張，但那樣操作起來比較麻煩以我們還是歸一下類，把相關(guān)的圖標(biāo)整合到一起。
接下來整合側(cè)邊欄的背景圖片，分析發(fā)現(xiàn)側(cè)邊欄應(yīng)用同樣的樣式，只不過高度有所不同，而且是四角都是圓角，所以只用一個(gè)通用的就可以滿足所有側(cè)邊欄塊的需求了。那么怎么制作這個(gè)通用的背景呢？從下圖我們發(fā)現(xiàn)，標(biāo)題的高度都是一樣的，只不過是下邊的內(nèi)容高度不同而已，那么我們把下邊內(nèi)容的背景制作的足夠長，超過可能出現(xiàn)的最大高度就可以滿足需求了。
整合后的效果如上圖，如果你現(xiàn)在還不明白為什么要這么做，那么一會兒寫完樣式表你就明白了。下面把三個(gè)圖標(biāo)也給切出來，如下圖：這些完事后，還有聯(lián)系我們的圖片和修飾小圖標(biāo)了。聯(lián)系我們的圖片如下，這里的圖片和小圖標(biāo)要背景透明
下一篇：平面設(shè)計(jì)師必備軟件技巧coreldraw中鎖定暫不修改的對象
熱文：平面設(shè)計(jì)師必備軟件技巧coreldraw巧用快捷鍵進(jìn)行縮放操作
天津平面設(shè)計(jì)相關(guān)培訓(xùn)：天津市天津平面設(shè)計(jì)培訓(xùn)、天津市天津平面設(shè)計(jì)培訓(xùn)就業(yè)班、天津UI設(shè)計(jì)培訓(xùn)、天津PS培訓(xùn)、天津C4D培訓(xùn)、天津AI培訓(xùn)、天津犀牛Rhino培訓(xùn)、 天津Solidworks培訓(xùn)、SolidWorks培訓(xùn)全科班、天津素描培訓(xùn)、天津CAD培訓(xùn)、天津室內(nèi)設(shè)計(jì)培訓(xùn)、天津建筑Rhino參數(shù)化設(shè)計(jì)培訓(xùn)、天津辦公軟件培訓(xùn)、天津各所大學(xué)到天津博奧教育的乘車路線
PS設(shè)計(jì)軟件培訓(xùn)課程學(xué)習(xí)輔導(dǎo)資料
為了更好的讓學(xué)員進(jìn)行學(xué)習(xí)PS設(shè)計(jì)軟件，天津博奧教育在專注天津平面設(shè)計(jì)培訓(xùn)課程的同時(shí)也為學(xué)員提供大量的PS軟件的學(xué)習(xí)輔導(dǎo)資料...
AI設(shè)計(jì)軟件培訓(xùn)課程學(xué)習(xí)輔導(dǎo)資料
學(xué)習(xí)平面設(shè)計(jì)中的AI軟件，想知道AI有多少應(yīng)用巧計(jì)，想更快的掌握AI軟件，想盡快學(xué)習(xí)并掌握AI軟件嗎？天津博奧教育提供大量...
CorelDRAW軟件培訓(xùn)學(xué)習(xí)輔導(dǎo)資料
天津平面設(shè)計(jì)培訓(xùn)課程中的CDR軟件是平面設(shè)計(jì)工作中重要的軟件之一，CDR軟件在使用中有好多實(shí)際技巧和經(jīng)驗(yàn)，為了正好的學(xué)習(xí)，天津博奧教育...
ID設(shè)計(jì)軟件培訓(xùn)課程學(xué)習(xí)輔導(dǎo)資料
為了更好的讓學(xué)員進(jìn)行學(xué)習(xí)ID設(shè)計(jì)軟件，天津博奧教育在專注天津平面設(shè)計(jì)培訓(xùn)課程的同時(shí)也為學(xué)員提供大量的id軟件的學(xué)習(xí)輔導(dǎo)資料...
天津平面設(shè)計(jì)培訓(xùn)文字設(shè)計(jì)學(xué)習(xí)輔導(dǎo)資料
文字在平面設(shè)計(jì)中的使用及表現(xiàn)，在實(shí)際工作中是非常重要，同樣也是天津平面設(shè)計(jì)培訓(xùn)課程中的重點(diǎn)，不但在課上講解，還提供大量...
天津平面設(shè)計(jì)培訓(xùn)綜合應(yīng)用案例輔導(dǎo)資料
不但注重單個(gè)設(shè)計(jì)軟件的使用和技巧，更注重的是設(shè)計(jì)軟件的綜合應(yīng)用，用實(shí)際設(shè)計(jì)案例把設(shè)計(jì)軟件無縫銜接，課上授課下課技術(shù)指導(dǎo)，還提供大量...
天津博奧教育地址：天津市南開區(qū)鞍山西道百腦匯科技大廈23樓2307室。
培訓(xùn)咨詢電話：022-58697923，022-58697932，18222233399。
天津博奧教育網(wǎng)址：psnx.com.cn
乘車路線：45、50、609、662、678、661、829、851、867、879（臥龍里站下）
640、687、859、705、829、849、847（世通大廈站下）
