1、簡述L行網頁布局類型的優缺點在ps中
你用一個插件就可以快速搞定pitstop插件,它是基於PDF軟體的,我給你一個視頻教程你看一下,看了你就能明白了
2、photoshop網頁美工期末總結與體會文章
篇一
在這一年美工總結自己接觸和學習設計的一點經驗心得。
一、網站的配色
我們公司主要是做一些醫療網站的,因此在整體配色的問題要特別小心,特別是我們做部隊醫療行業這一塊的,主打色是軍綠、海藍、寶藍,兼且要一些部隊元素,這樣才能體現部隊應有的權威性、穩重性和聲望、精神。只有這樣醫院網站才能給用戶帶來更踏實的視覺和吸引更多的人來就診,
二、網站的布局
做美工設計的不單要對色彩要有好的感覺外,對布局也要有很好的把握,組合的好壞直接影響作品的效果。整體配色、字體、各模塊的間距、插圖、增減內容等各個方面的敲著。
三、網站的細節
對美工設計人員來說,這點也是非常重要的,細節能否處理得當也能體現做事明細,這也是我在不斷提升的一塊。比如背景色、色彩漸變、各組件間間距、標題樣式、字體/大小/顏色、行/段間距、插圖位置/邊緣處理、輸入框寬高/邊框色/背景色、按鈕的位置等等太多了。還是之前的話,只有你看得多了,比較得多了,那麼處理細節方面也會有很大的提升。
四、用戶體驗度
一個網站的如果美工設計得好,給人們的第一印象是非常好,這代表著人們可能還會停留在你的網站裡面繼續瀏覽,這樣也大大提高用戶體驗度。因為我們做醫院網站的,要保持美觀、權威、明細等,比如人們來到了網站瀏覽,如果美工圖片做得非常不清晰也會影響患者對整個網站的印象,還有廣告圖片的位置問題,要放在一些比較顯眼的地方,同時不會影響到患者查看其他內容,對於圖片廣告的圖片,也要突出權威性和真實感,這樣對就診率的提高也會有很大的幫助的。還有美工圖片的好壞直接影響了用戶對網站的印象。用戶體驗是對美工更高的一個要求,甚至有點兒超越美工的范疇,但只有美工了解這些才能更合理地設計界面布局,整體搭配等等。
五、個人心態
美工本身就是細活,著急是沒用的。有了基本的審美觀,需要創作時心情放鬆,做些想做的事,吃點想吃的東西,隨心所欲,給提供自己創作靈感環境。不要意味的坐在電腦前去想,事倍功半,會把自己郁悶死。所以我的建議就是:多看,多模仿,多做,多比。切忌自己沒有什麼審美觀就盲目創作,其實模仿沒什麼可恥的,是學習的畢竟階段。
篇二
新的一年開始之際,在我們昂首期待未來的時候,有必要對過去一年的工作做一個回顧,總結以往的經驗教訓,以待在新的一年有所改進。
回顧過去一年,在領導的帶領下,在各位同事的大力協助下,工作上取得滿意得成果。我的崗位是美術編輯,工作崗位在開發中心,可是我的工作范圍並不局限於程序開發中的模版設計等工作,而是涉及到了編輯部的廣告設計,廣告圖片替換,頁面策劃修改;涉及到技術部頁面製作,代碼調試,樣式修改,後期維護等不同工作。可以說凡是需要突出我們網路部及網站整體形象的地方,就需要美編參與工作。
設計工作是痛苦與快樂的煉獄,每當面臨重大的設計任務時充滿了壓力,開始搜集各種資料(包括文字的、圖片的),接下來尋找設計靈感,沉思、焦灼,經過痛苦煎熬,終於有了滿意的創意時倍感輕松。每當經過艱苦的磨礪,自己的勞動成果得到大家的肯定時,便是工作中最大的快樂!充滿了快意。
當然,工作中的痛苦與快樂首先要求有堅定的政治信念與立場,遵紀守法,愛崗敬業的強烈責任感和事業心。因為熱愛自己的工作,所以精通本崗位的專業識和業務技能,熟悉有關行業規范,關注行業的發展趨勢。時刻保持強烈的創新意識。
篇三
前言
目前,人類社會已經邁進了網路時代,計算機和互聯網已經於老百姓的日常工作,學習和生活息息相關,人類社會目前又處於了一個歷史飛躍時期,正由於高速的工業化時代邁向初步的計算機網路時代,在計算機技術,網路通訊技術的告訴發展的今天,電腦和網路正在以驚人的速度進入人類社會的各個角落。那麼今後,我們將用怎樣的態度和方式來面對網路科技給我們帶來的物質層面和精神上的變化,我們必須對因為網路而引發的社會生產和生活各個層面的深層次變化作一個深刻的理解和清醒的認識,我想這必將成為是當今人類所面臨的最大課題,可能是我們科學工作和研究者們需要面對的新的挑戰。
當互聯網成為第四種媒體出現的時候,它就表現出與以前的大眾媒體的不同特徵,在報紙、廣播、電視上,普通人不可能及時發表個人對某一重大事件的看法,而互聯網能隨時隨地公開地實行人與人之間的對話,作為受眾的網民不再是被動的,他可以隨時表達自己的意見,有時甚至可以成為某些事件的主角
隨著對商業化使用政策的放寬,網際網路已經不僅僅局限於信息的傳遞,網上信息服務出現了。許多機構、公司、個人將搜集到的信息放到網際網路上,提供信息查詢和信息瀏覽服務。人們把提供信息來源的地方稱為「網站」,即網際網路上的信息站點。凡是連入網際網路的用戶,無論在世界任何地方、任何時刻,都可以從網站上獲取所需的信息和服務。
一、實習報告目的
剛走出社會的時候,自己就像一張白紙,工作是什麼樣子?要用什麼樣的狀態去工作?這些在學校里是無法體會的。實踐讓我走向科技應用,走出課堂.目前,我所缺少的主要不是知識,而是缺少將知識與實際相結合的能力.我們在課堂上所學的,與在實際當中遇到的是不盡相同的.其往往具有不具有明顯的特徵,這需要我們進行抽象概括才能解決各種問題,而這次實習正好給了我這次實踐的機會,結合實實在在的用作,運用自己所學的知識,積累經驗。
二、實習單位及工作崗位簡介
1、實習單位簡介
該公司是一家國內專業的電子商務外包服務商,公司主要為品牌企業提供商城搭建、網站建設與運營、營銷推廣、數據分析、電子商務代理運營等服務。我們的優勢是:公司電子商務運營經驗豐富;倉儲配送能力強大;網路營銷實力宏厚:公司擁有豐富的網路營銷經驗,可以為客戶提供各種營銷方式,並且提供數據分析工具,同時配備專業的客服能力,結合專有的技術,公司可以為客戶提供一個強大的客戶服務平台。
2、工作崗位簡介
該崗位主要負責公司廣告、圖片、動畫、海報、logo、
及網頁的設計製作。服從公司的指揮,認真執行其工作指令,一切管理行為向公司負責。嚴格遵守公司規章制度,認真履行工作職責。認真做好各類信息和質料收集、整理、匯總、歸檔等工作,為公司旗下各項目的成功開發提優質的素材。全面主持設計工作,擔綱創意核心、設計指導、效果統籌、設計溝通的任務。負責與各崗位的協調工作,網站頁面的美工設計,進行div+css網頁布局及修改。配合技術部門對網站頁面設計和技術的配合。
二、 實習過程
1、初來公司的時候
在接到公司面試的電話後,我來到了武漢世紀聯動科技有限公司,因為我所應聘的是網頁設計,所以要有一個小測驗,美工部的經理發給我一個題目,根據MLB的官網風格,畫出相同風格的電子商務網站。所有素材自己找,畫好圖紙後,用css+div進行布局。考察的主要是相關軟體、的操作能力與代碼掌握的熟練程度,說實話,學習photoshop和css已經有一段時間了,剛開始上機,還有點生疏。但憑借著在學校巨塔工作室學到的知識,還是畫出了相應的圖紙。以及對該頁面進行了布局。經理看了以後,說不錯,就說了句,以後的外國網站,不能出現中文。讓我三天後參加培訓,進行相應的考察。合格就可以正式上班。
2、三天的培訓工作
三天後,我來到了公司,一看,來參加培訓的人有很多,大概在是個左右,其實所謂的培訓,就是讓大家先熟悉網站的工作。先做了些他們平時乾的活,做些廣告網頁,這些網頁都是靜態的,無需實現動態的交互,這才讓我拾起了些信心,後來我發現,其實我們一起實習的,水平都差不多,我們公司主要更偏向寫代碼,所以我的優勢就突出了。
3、最後的考核
三天的培訓後,我們迎來了最後的考核,合格的人會被留下,並得到一份為期一個月的實習合同,然後會在根據實習期的表現決定去留問題,最優秀的人會轉正,得到更加優厚的待遇。
考核的內容就是在公司的商務網站上任選一個頁面,然後再規定的時間內做完,我還是不錯的,技術比較熟練,是第四個完成的,當我們把網頁做完後,由這家公司的經理進行審核,最後的結果是。我被留下了,最後完成的,就那樣被活生生的淘汰了,制度雖有點不近人情,但是社會就是這么的現實,有能力就能生存。就這樣,我們每個人得到了一份一月的臨時合同,正式開始實習工作。
4、 正式工作
我們每天的上班時間是從早上8:30分到下午的17:00,其中,中午有兩個小時的休息時間,這是我見過最有激情的一些人了,年紀輕輕的,干勁十足,來了公司以後就工作,連平時連天的內容也和本行也分不開,我喜歡他(她)們,因為是實習期,所以每天做的數量沒有太大要求,但是每個人都玩命似的幹活,抓緊時間做網頁,我們做的網頁是比較簡單的,從上到下式的網頁,通過css+div布局,這樣在後期瀏覽器兼容測試中,就好做多了,文字與圖片之間就不會有太多的麻煩,我乾的很不錯,不過有些追求最精,我做的網頁的速度慢了很多,最初每天只能做1也頁面左右,這對於我來說是不能接受的,後來我改變了工作的方法,我第次工作的時候,先訂下計劃,比如今天做多少頁面,然後我將要做的所有頁面,先做好排版,,這是的網頁雖然排過版,但是不美觀,因為沒有進行美化工作,然後我會在下午的時間,集中全力做美化工作,就這樣我的速度提高了很多。我相信只要自己多加練習,速度就會提升。
三、實習內容
1、整體工作
我的工作就是負責設計整個網站的頁面部分,根據網頁設計師或客戶所提供的主題要求來設計出整個網站。
2、工作中要完成的任務
作為一個網站美工除了要求網頁三劍客,ps。這些比會的軟體以外,還要對html用的很熟練,對asp或php或jsp要有初步的了解。
(1)表達一定的藝術效果
一個成功的網站應該把網頁設計得吸引人,同時又要傳達設計思想和情感。網頁作為一種媒體,它必須具有一定的藝術感染力,一個平淡無奇、雜亂無章或毫無美感的網頁很難會有瀏覽者喜歡,更不要說讓瀏覽者去注意它的內容了。
(2)使頁面結構清晰可讀性強
經常可以看到這樣的頁面,上面堆砌了許多內容,卻沒有考慮它的空間框架,讓人看了無法知曉哪些內容才是最具發言權的。沒有流暢的視覺流程,這是典型的沒有注意到編排清晰度、可讀性的表現。
(3)實現不同的功能
在網路這條信息高速公路上,網頁最主要的功能就是一種傳遞信息的手段。因此,它一切內容都是為了這個目的而服務,都是要圍繞這個中心進行設計的。然而,要實現這個功能,網頁的美工設計和內容都必須有針對性。所謂針對性,就是指對不同類別的網頁要求採用不同的美工藝術效果。
(4)網頁的內容
網頁設計人員美化網頁,增加網頁設計的藝術感,都是為了網頁設計的內容服務的。一般來說,網頁的幾項基本內容:標題、網站標志、主體內容、導航、廣告欄等。
(5)確定網站的類型
在設計網頁之需要做大量的准備工作,需要思考以下幾個問題:1、網站的類型:站點屬於新聞、娛樂、商務類的綜合站點,還是個人主頁;
(6)確定網站的風格
如果瀏覽者主要是年輕人,頁面就要設計得基調明快,活潑富有朝氣;如果針對的群體是政府工作者或科學工作者,那麼頁面就要設計得嚴謹、嚴肅、理性、科學;如果針對的群體是婦女兒童,頁面則要設計得溫馨、友愛、輕松;如果針對的群體是戀人或從事藝術工作的人,頁面就要設計得浪漫並有藝術感
(7)確定網頁之間的鏈接關系
在網站的總體規劃列出來後,就必須要考慮各個網頁之間的關系,是星型、樹型、網型還是直線鏈接?
(8)具體工作流程
網站美工確保項目派工單和網站資料的完整性,作出設計方案和欄目設計方案,留意客戶特別要求的信息
1、研究一些同類型的優秀網站,結合從客戶那裡所獲取的資料,總結出比較合理的布局和風格,開始設計方案和欄目設置方案.
2、設計好最佳設計方案和欄目設置方案,先讓業務人員審核一次,達到要求確認後,進行PSD的樣板頁面設計.
3、設計好PSD樣板頁面,讓業務員跟客戶展示設計好的樣板,是否符合要求,符合要求後進行廣告網站的全面的PSD設計和廣告網站製作. (PSD樣板頁面設計
對價錢跟要求並不高的客戶,對網站的每個頁面設計的要求是顏色基調不同、樣式稍有改變,設計頁面排版風格簡練到位、網站貫串一副Flash動畫,以增加動感這樣的網站在後面製作頁面簡單,維護修改簡單;
對價錢高但要求不高的客戶,照樣採用上述方法,只是在考慮項目製作時間長短的情況下,對項目的質量進行提高;
對價錢跟要求都高的客戶,對網站的每個頁面設計的要求是每個欄目精心設計,在保持風格的前提下,對每個欄目的樣式跟顏色都有所不同、設計一個大Flash貫穿整個網站,並在每個欄目的頭頁或欄目導航欄上設計出簡單漂亮的小Flash動畫.讓整個網站充滿動感和活力)
4、合理切割PSD文件,導入保存成圖片(.gif .jpg )形式.
5、建立網站後台文件,檢查後台欄目跟塊名沒問題後上傳到伺服器
6、使用Dreamweavers對PSD樣板頁的樣式規定進行網頁排版製作,設計規范合理,擴充性強、無多餘累贅代碼.
7、建立網站的字體,表單按鈕所需要的Css樣式表
8、設計每個欄目的模板頁和PHP頁面,並對不同的元素使用定義好的Css樣式表.
9、製作完成每個欄目設置的模板頁和PHP頁面後,添加網站樣板資料.
10、檢查網站的鏈接排版錯誤跟漏洞,從而進行修復和完善.
11、發到部門人員內部審核一遍(針對網站,不針對廣告),對鏈接和排版錯誤的地方進行修改.
12、再自己瀏覽一遍、確認沒問題後通知業務人員和客戶進行驗收修改.(如有兼容性的問題,則需對其兼容性的解決)
五、實習收獲與體會
通過本次畢業實習我真正了解到步入社會後我們還有許多知識要學習,還有許多需要加強的地方,我的網站這方面的知識還有許多欠缺的地方,還不能熟練的掌握。我知道這不是短時間內能夠學會的,這次實習對我很有大的幫助,在這過程中我還學到了很多東西。有了這次實習的經驗,再以後就可以更快,更好的融入新的環境,完成學生向職場人士的轉換。在實習期間通過不斷的學習和總結經驗,提高了處理實際問題的能力,為我以後步入社會進行總結了以下經驗。
(1)用人單位在招聘員工的第一要看的就是你是否有想去學、我們一同過去的幾位應聘者中,有一部分就是因為在想去學習的勁頭上比別人遜色一點而落選。因為對於用人單位來說如果一個人有想去學習,那麼他在這個特定的崗位上就會很快的得心應手,從而減少了用人單位要花很大的力氣來培養一個員工。
(2)在工作中要有良好的學習能力,要有一套學習知識的系統,遇到問題自己能通過相關途徑自行解決能力,因為在工作中遇到問題各種各樣,並不是每一種情況都能把握,在這個時候要想把工作做好一定要有良好的學習能力,通過不斷的學習從而掌握相應技術,來解決工作中遇到的每個問題,這樣的學習能力,一方面來自向師傅的學習,想工作經驗豐富的人學習,另一方面就是自學的能力,在沒有別人幫組下的情況下自己也能通過努力,尋找相關途徑來解決問題。
(3)良好的人際關系是我們順利工作的保障。在工作之中不只是同技術,同設備打交道,更重要的是同人的交往。所以一定要掌握好同事之間的交往原則和社交禮儀,這也是我們平時要注意的。和諧的人際關系,能為順利工作創造了良好的人際氛圍。
另外在工作之中自己也有很多不足的地方,例如缺乏實踐經驗,缺乏對相關技能知識的標准掌握等。所以我常提醒自己一定不要怕苦怕累,在掌握之知識的同時加強實踐,做到理論聯系實際,另一方面要不斷的加強學習,學習新知識、新技術。
通過這次畢業實習,把自己在學習一方面鞏固所學知識,提高處理實際問題的能力,另一方面為順利進行畢業報告做好准備,並為就自己能順利與社會接軌做好准備,畢業實習是我們從學校走向社會的一個過渡,它為我們順利的走出校園,走向社會為做好了准備。
3、在Photoshop里設計好網頁後,在Dreamweaver里怎麼導出div+css布局的靜態頁面?
在PS里設計好用切片把你需要的圖片切出來,然後在DW里編輯用div+css布局編寫好就哦了
4、淺析關於photoshop與網頁布局設計的關系
一、Photoshop在網頁布局設計中的作用
1、 Photoshop在網頁布局計劃中的作用
①布局靈活:Photoshop的靈魂是圖層,每層可以放置不同的元素,圖層之間可以相互鏈接,也可單獨存放,每個圖層上的圖像位置可以隨意挪動而不影響其它圖層的圖像位置,每個圖層上的圖像大小、色階、亮度、飽和度透明度等可單獨設置而不影響其它圖層上的圖像。如此靈活的功能,完全可以讓設計者隨心所欲設計而不受任何約束,而Dreamweaver等軟體給設計者提供出自由度降低很多,其效果也會大打折扣。
②修改方便:網站建設前期首先要與客戶簽定合同,簽定合同時客戶最關心的是自己的網站是什麼樣子,這時設計者不可能拿出建好的網站給客戶演示,這樣一是成本太高,合同能否簽定還不一定;二是保護知識產權,有的客戶拿走設計方案交給別的公司去做,自己豈不成了給別人做嫁衣裳。最好的辦法是拿出在Photoshop中做出的效果圖給客戶看。一般情況下,客戶一次滿意率非常低,總會提出修改意見,而且還會不斷地提出修改方案。這時我們就可以利用Photoshop的強大功能按客戶的要求方便地進行修改和優化,直到客戶滿意為止。如果在Dreamweaver下,每做一次大的修改,幾乎跟重新設計一樣費時費力,而且還不一定能達到客戶要求。
③加快瀏覽進度。一個設計不美觀不規范的網站是沒有生命力,同樣一個打開、下載速度慢的網站也是沒有存在的價值。心理學研究表明,選擇性越多,人的忍耐性越差;可選擇性越大,人的忍耐性越低。在互聯網高度發展的今天,同類網站多如牛毛,人們沒必要在一個網站前停駐靜侯你一點一點地下載、打開、測試、顯示。一般情況下,下載速度一旦超過10秒,人們會自動轉向其它網站。決定下載速度的因素很多,如伺服器配置標准、網路傳輸介質、客戶機的配置以及同時點擊人數的多少等。但是在這些條件相同時,網頁大小及網頁元素的優化和配置就是唯一的因素。使用Photoshop設計的網頁經過裁切後體積相對要小得多,相同的元素因為其格式變化也會大大提高下載速度,因此Photoshop就成了提高速度,提高點擊率的制勝法寶。
二、用Photoshop設計網頁布局應注意的幾個問題
1、 網頁文檔尺寸與解析度。網頁文檔一般為1007*600和708*800像素,解析度為72像素,這是屏幕解析度,太高的解析度並不能增強效果,反而會降低下載速度。一般情況下,大型網站不要超過3屏。
2、 顏色:網站背景顏色與文件顏色要統一協調,一般不要超過兩種,一些網站被批評為臟、亂、差,其要害是顏色搭配不合理,或者太多,給人一種不舒服的感覺。
3、 字體,標題。導航字體一般用黑體,正文一般用宋體,其它字體瀏覽器不兼容,可能造成調試時出錯,給工作帶來麻煩。如果為增強頁面效果用到其它字體,則最好在用Dreamweaver前在Photoshop切分及圖片,字體的顏色設置要考慮到整個頁面效果。
4、 布局格式:雖然效果圖是用Photoshop設計的,但一定要兼顧到Dreamweaver對頁面布局的要求,Dreamweaver下網頁布局是使用『國』字形,還是其他模式,是否使用框架,使用框架的類型是哪一種,都是在設計前要考慮到的。否則會造成效果圖與最後的網站布局出現出入,給客戶和自身帶來麻煩和損失。
5、 圖文搭配:一個好的網站是圖片多好還是文字多好,這要視網站的功能、行業、目的而定,但有個原則就是圖文合理配置,而圖片則要按一定的空間分布進行和諧分布。另外,圖片大小要合乎美學原則,不能太大,一般用縮略圖較好,如果要顯示更多的圖片細節,不妨給縮略圖鏈接一個大的圖片。
6、科學使用參考線。參考線是設計頁面布局的有效輔助工具,我們可以先用橫參考線將網頁布局分成幾大版塊,然後用豎參考線將每個板塊按我們的思路分為幾個小板塊,最後再整體觀察一下。要精確定位網頁元素,可用對齊參考線的方法來實現:「視圖」—「對齊到」—「參考線」,而參考線的精確定位可以藉助標尺和網格來實現,這里要注意的是網站的Logo和Banner或者導航條等都是事先設計好的,有固定大小,在做這些區域時尺寸一定要按照這些元素尺寸設計,不能有絲毫差錯,否則進入DreamWeaver整合時,則可能出現空邊或撐開表格的現象。
三、「切片」工具是Photoshop通向DreamWeaver的橋梁。
利用Photoshop效果圖最終與客戶簽合同後,還不是Photoshop設計網頁布局的終結,而還有關鍵的一步,就是「切片」,只有正確地切片後,DreamWeaver才能對效果圖進行有效的整合,Photoshop在網頁布局中的積極作用才發揮到了極致。要完成「切片」這關鍵的一步,應遵循以下原則:
1、必須依靠參考線。設計時用到參考線,切圖時更要用好參考線。參考線能保證我們切出圖在同一表格中的尺寸統一協調,有效避免「留白」和「爆邊」。
2、 Logo和Banner必切。如果效果圖中存在Logo和Banner,我們必須切片這部分,主要是為預先設計的Logo和Banner留下空間,在DreamWeaver整合時最好不用Logo和Banner的切片,而是直接用Logo和Banner原文檔,這是提高Logo和Banner效果的需要。
3、虛線和轉角形狀必切。虛線和轉角形狀在DreamWeaver 不能實現,只能使用Photoshop切片。
4、漸變必切。這也是Dream Weaver實現不了的。
5、大圖必切。大的圖像必須切分成均勻圖,這樣可以提高網頁下載速度。
6、特殊文字效果必切。除黑體和宋體外,其他字體必須切片。DreamWeaver下最有效的字體只有宋體和黑體,其它字體瀏覽器也要能不兼容。
7、導航條必切。一般情況下導航條都是特別設計的,其效果在Dream Weaver下不能實現,因此必須形成切片供後期使用。
8、有效存儲切片。存儲切片的文件夾必須位於站點的根目錄下,文件夾名必須是英文名字。存儲切片時用「文件—存儲為web所用格式」命令。切片存儲格式要求一般存為Gif格式。Gif佔用體積小。要求較高的圖像存儲為JPEG格式,JPG格式顯示更多的圖片細節。
當然,網頁布局的設計軟體的使用依設計者習慣、愛好、風格不同而不一樣。筆者在此只是談一下一般的規律,以供廣大網頁設計初學者參考。
5、PS網頁布局怎麼理解
PS切圖布局,沒用過,DW布局的話,用div+css比較好,至於PS切圖布局我們老師沒有推薦
6、如何用PHOTOSHOP做網頁的布局
首先要看布局需要多大 。然後新建一個網頁大小的背景;在根據導航條,logo,欄版目的大小各自新建圖層。權在編輯完成後將其合並。 可用ctrl+u 綜合調整整體顏色;ctrl+m調整綜合對比度。最後用切片導出。
7、簡述ps製作網頁布局的優缺點
綜合各種設計方法的優缺點,可以得出利用Photoshop設計網頁通常可以達到意想不到的效果,這不只是取決於他可以隨意布局圖片,更得意於其專業的圖像處理能力。下面小編就給大家展示一下Photoshop設計網頁的獨特之處。 開始製作: 1、打開PS,新建空白文檔,名稱設置為“feifei工作室”,從預設大小下拉列表中選擇“1024 x 768”,模式設計為“RGB顏色”,內容設置為“白色”,點擊“好”按鈕完成文檔的創建工作。 2、新建一名稱為“框架”的圖層,利用該圖層實際整個網頁的整體布局。首先選擇“矩形選擇工具”,然後將矩形的寬度設置為1024,高度設置為80,在文檔的上下兩側各框選一部分內容並填充為黑色,從而使整個網頁呈現“寬屏幕”效果。 3、在背景圖層的上方新建一新圖層,並命名為“背景顏色”。點擊“矩形選擇工具”,設置“寬度為400,高度為768,然後在窗口的左側框選一部分內容,填充一種深綠色。然後點擊“矩形選擇工具”,設置“寬度為624,高度為768,然後在窗口的右側框選一部分內容,填充一種淺綠色。填充兩種顏色飽和度有一點差別的顏色,目地是產生較為明顯的對比。 4、在“框架”圖層之上再新建一圖層,名稱為“主體元素”。打開一張事先准備好的百合花圖片,雙擊“背景”圖層將其轉換為“圖層0”,點擊“魔術棒”工具,在圖片白色區域內點擊,選擇白色區域後,按下DEL鍵刪除白色區域。然後拖放圖片到圖層“主體元素”上,位置如圖所示。 5、然後選擇“矩形選擇工具”,設置“寬度為624,高度為768,然後在窗口中選擇花朵右側的一部分內容,並調整其亮度和對比度,使花朵的左右兩側呈現明顯的對比。 6、對該頁面進行細節的調整,增加一些導航欄,信息提示內容和版權信息等內容,最終製作完成的頁面如圖所示。 7、選擇“切片”工具,然後對內容進行切分。切分的好處是有利於文件在網路上傳輸,同時在用切片工具劃分內容時最好將需要被文字內容替換的部分進行獨立分割。分割完成後的效果如圖所示。 8、找到保存文件的位置,打開"feifei工作室.html"文件,然後在內容區域內點擊滑鼠右鍵,選擇“查看源文件”,就會發現對應的網頁內容已經生成。至此,利用PS設計網頁內容完成。
8、網頁設計中頁面的尺寸怎麼定?用PS設計的時候有哪些注意事項?才能在切圖的時候符合網頁布局?
寬度大概在960~1000px; 但是有的時候你需要考慮網頁中1000以外的東西怎麼延伸和擴展問題。因為目前為止,最小的解析度是1024的,所以符合最小解析度的就可以。
9、ps網頁布局的大小問題
最常用的瀏覽器頁面是1024*768像素,但瀏覽器本身還要讓一定空間,所以應設為1007*600像素
10、用photoshop做網頁方法
800*600我一般寬會設成780px,1024*768 寬度會設成 1000px,高度當然要看內容多少來定。
布局就不好說了 要看設計者的喜好、習慣、網站的功能、設計風格來定了。
接下來就是切圖了,切圖是個很麻煩但又很關鍵的步驟。切圖前必須考慮好圖片大小(大圖為了瀏覽時能順利打開最好切割成N小快),是否為背景圖(有的圖很大,但實際上都是小圖片的平鋪效果,所以遇到這種圖只取小圖,在網頁中設為背景就可以了)。除此之外還要考慮是否可以用圖片以外的元素代替,比如有的純色塊完全沒必要用圖片,只要在網頁中調整表格的顏色就可以得到相同的效果。photoshop有專門的切割工具,按需要把設計好的網頁切割好後用ctrl+alt+shift+s保存,就會生成一個html文件了,你會發現html的圖片文件夾里已經有你切好的一塊一塊的小圖片。瀏覽這個web頁面,顯示的效果和ps中的完全一致,似乎布局已經完成了。
但Dreamweaver現在才剛剛開始排的上用場,因為網頁畢竟不是純粹的圖片,還需要文字、flash、聲音等元素的添加,Dreamweaver要做的就是繼續完善你的頁面,圖片越少越好,該刪的刪、該設背景的設為背景該用表格顏色代替的用顏色代替。
哇塞 想想都麻煩^ ^
歸根結底 photoshop 是用來構圖設計的,而Dreamweaver是為了完成並完善圖片到網頁的轉換過程。