導航:首頁 > 萬維百科 > 如何在ps中設計網頁

如何在ps中設計網頁

發布時間:2021-03-22 18:56:26

1、如何用Photoshop製作網頁模板

網頁中的元素有很多,像Banner條、文本框、文字、版權、Logo、廣告等。盡量把這些相對獨立的元素放在不同的圖層中,這樣方便以後的再編輯。 不過圖層一多,就顯得很凌亂,可建立多個圖層組來進行管理。單擊圖層面板右上角的小三角按鈕,從彈出菜單中選擇「新建組」,在隨後出現的對話框中為新建組取一個名稱(如:「網頁頂部」),確定即可。這時圖層面板中多出一個文件夾圖標,即圖層組。把相關聯的圖層都拖放到同一組中,比如網頁頂部的所有元素,標題、菜單、Logo等都放到「網頁頂部」組中(見圖1)。同樣方法可以建立多個組,在組的下面還可以建立子組。 點擊圖層組前面的小三角,就可以像文件夾一樣展開或折疊它,這樣圖層面板就顯示干凈利落得多,要修改某個元素也能很容易找到。對同一組中的所以圖層可以方便地進行統一操作,如整體復制、刪除、隱藏、合並等。 小提示: ★如果你想借鑒某個網頁的設計,不妨把它截成圖片放在最下面的圖層中,再拉出多個參考線劃出網頁的大致版式,再在此基礎之上邊參考邊製作自己的網頁。 從Photoshop到Dreamweaver的轉換 在Photoshop中設計好之後,下面就要用切片工具把它轉換成網頁。有些人在切片之前喜歡合並圖層,其實沒有必要,合不合並圖層對最終生成的網頁沒有多大影響,反而會妨礙以後的編輯修改。 第1步:我們最終需要的,只是Photoshop中製作的圖形和框架。選擇切片工具(快捷鍵為K),把需要的每個圖形獨立切分出來。每切分出一個圖形,在它的左上角會顯示出切片編號(見圖2)。 第2步:在工具箱右擊切片工具,從彈出菜單中選擇「切片選擇工具」,用它可以選取、移動切片,並可以調整切片的大小。右擊某個切片還可以刪除或劃分這個切片。

2、怎麼將PS的圖片製作成網頁

這要牽扯三個軟體:
1.photoshop(網頁圖片製作)
2.imageReady(PS圖片放進去,導出「將優化結果存儲為..」--保存類型選擇--html)
3.Dreamweaver(打開HTML文件,你就可以看見代碼了)

3、如何在Photoshop中設計網頁的網格

設計網頁的網格方法1

第一種方法使用GuideGuide 卡梅倫McEfee建立垂直列。這Photoshop插件被認為是處於測試階段,但是從我與它的經驗的一切工作得很好,甚至有談GuideGuide 2的發布,其中將包括更多的功能。GuideGuide頁面上可以找到安裝說明。還有一個使用它的視頻教程是由羅素布朗一起在Adobe 。

成立於5秒您的網格

確定利潤率列和排水溝寬度,數量。然後點擊「創建指南」。

如果你設計樣稿的畫布寬,做快速的數學運算,使保證金長度要限制你的960像素的網格允許。例如,如果在畫布是1200像素寬,然後左,右邊緣將每個120像素。


例如12列設置為120像素的20萬像素的排水溝和利潤率。

您還可以設置基線網格這樣,但你最終很多導游。一個更好的選擇可能是方法上的一個有特色的的邁克貴金屬的方法及工藝視頻 ...

方法和工藝的可擴展的基線網格

這里是一個步驟的簡要介紹設立一個可擴展的基線網格。

建立網格的基準值,然後創建您的圖案模板。基線網格是由領先的正文中(或行高)。例如,如果您的設計的主體副本是在13點Helvetica,在18分的領先,那麼你將成立一個18像素的基線網格。

創建一個Photoshop文件,該文件是您的基線網格的高度,填補了底部的像素,並留下其餘的像素透明。在這種情況下,畫布的尺寸將1個像素寬和18像素高。

「全選」,然後保存為一個新的模式。您可以通過編輯→定義圖案...

轉到調整圖層→模式,並選擇新創建的網格圖案。

根據需要,調整不透明度。


列和基線網格1的方法的一個例子。

優點

你會得到一個可選的基線網格,您可以使用獨立的垂直的柱網。基線網格,可以創建視覺上的混亂,當在頂部的設計樣稿奠定。使用這種方法,它可以只在需要時進行切換。

如果你喜歡使用您的網格指南,這是更好的解決方案。

您可以隱藏和顯示網格通過一個簡單的快捷方式。

缺點

使用垂直參考線來標記文檔中的其他元素,可很難,因為你可能會混淆他們與電網。

方法2相比,網格你的選擇是不具體或全面(如設置的橫向模塊的高度)。

數學網格線的確定,不一定會配合像素網格。這意味著你的導游,可以在某些情況下,下降不均,並最終被定位實際像素的中間。

這種方法需要兩個獨立的進程相比只是一種方法,即將來創建一個垂直和基線網格,。

設計網頁的網格方法2

模塊化網格模式是所有功能於一身的的網格解決方案 。該工具創建一個垂直的柱狀網格和基線網格所有作為一個模式 。採用模塊化的網格模式有兩種方法 :


除了對Photoshop 的應用程序面板,這也適用於煙花,GIMP和微軟Expression設計 。請注意,您必須有最新的軟體(Adobe CS5或等值的其他應用程序之一中)和本小組的互聯網連接工作。話雖這么說,如果您已經創建了一個模式,並將其保存在資料庫中,然後你就可以訪問它,而無需任何其他 。

Web應用程序
瀏覽器,Firefox,Safari和Opera。Web應用程序使您可以創建一個網格模式和所有格式的瀏覽器直接下載 。

無論你選擇,隨便挑一個模塊的寬度,排水溝寬度和基線數量,以及模塊化的網格模式,沒有休息。您也可以指定一個水平模塊的高度。

4、如何用ps設計網頁?

?

5、如何用Photoshop做網頁設計

如果是給個人做,怎麼做都無所謂。如果是在公司里給客戶做。這一步不可少,出了效果圖後,要給客戶看。等客戶確定不再修改時再做網頁,目的就在於防止客戶反復修改,動布局!
另外會做網頁效果圖,代表你的設計能力。用dreamweaver直接做的後果是邊想邊做,容易把設計思路搞混了!
據我所知,這樣的教程基本沒有。因為做網頁效果圖只要基本的操作,有時從別的網頁截一塊下來處理一下,直接用到自己的效果圖上。

一般顯示器解析度 寬:1024 高: 768 寬減去滾動條的寬度, 一般為1003-1004 不會有橫拉條 高度 根據頁而定
網頁設計需要的PS操作技術並不是很多,只要掌握基礎就行了。
但是你想要做好一個稿子就不是那麼簡單了。
這當中有一些天賦的因素,但是更多的是學習。
你可以從模仿別人的稿子開始,漸漸的融入自己的東西。

http://www.68design.net/
這個站每天都會有新的酷站收藏,也有設計欣賞。
http://www.zcool.com.cn/
這個站素材豐富而且也有酷站收藏。

要做好網頁設計,一定要多看,拚命的看並且吸收裡面的東西,看看高手們是怎麼處理細節的,這樣慢慢自然會有提高。
是否可以解決您的問題?

6、如何用photoshop進行網頁設計

你是想要在原來的設計下面加上一塊空白,那可以選擇「圖象」-「畫布大小」,在彈出的對話框中,先設置定位,如果在下面加長就點擊向上的鍵頭,這樣就會在原圖的下方加入空白,現在再輸入設定高度數字就OK了!

7、怎麼使用PS製作一個網頁

你好!
准確的說,ps是製作網頁的其中一個軟體之一,製作網頁有專用的「網頁三劍客」:PS、DW、flash。
想要做網頁的話,你起碼要會前兩個,其中
ps在網頁製作裡面的作用主要就是:劃分切片+圖片處理。

劃分切片:就是將你在ps裡面做好的網頁版面進行合理的劃分,劃分為一個個小的切片,然後用DW對這些切片進行布局。

圖片處理:這個很好理解,就是對網頁圖片進行優化+處理,以節省空間和達到你想要的圖片效果。

最終的網頁文件是在DW這個軟體裡面完成的,單靠ps做不出來一個完整的網頁。

8、如何用ps製作網頁首頁

首先要看行業,行業領域的區分,再加上本身公司的logo主題色是什麼
其次是對網站的大小,現在一般都是1920px的寬主體1100px,特殊行業有特殊的尺寸
功能的設想,布局框架,哪個位置需要布局什麼板塊
再就是相關的圖片設計與文字的排版,還有比較多的細節等等一系列。
還有問題歡迎私我

與如何在ps中設計網頁相關的知識