Photoshop結(jié)合Dreamweaver制作網(wǎng)頁(yè)相冊(cè)
來(lái)源:不詳
作者:佚名
學(xué)習(xí):5879人次
Photoshop結(jié)合Dreamweaver制作網(wǎng)頁(yè)相冊(cè)Photoshop(以下簡(jiǎn)稱PS)的批處理功能是很強(qiáng)大的,如果利用好可以做為我們做很多工作。今天我們介紹“PS批處理設(shè)計(jì)制作網(wǎng)頁(yè)相冊(cè)”。
一、準(zhǔn)備好自己要做相冊(cè)的素材,產(chǎn)品展示、案例展示、照片展示等都可以,統(tǒng)一將這些圖片放在一個(gè)文件夾下,我這里將這個(gè)文件叫做“Res_IMg",這里面放的都是大的圖片,小圖片一會(huì)兒ps會(huì)為我們做的。
二、打開PS,選擇菜單如下:
三、這個(gè)就是PS制作圖片展示的主要界面啦,主要有以下幾個(gè)樣式:
樣式中可以選擇生成不同的html頁(yè)面的形式,PS CS版本中提供了8種格式,都不錯(cuò)的。
選擇源圖像工作區(qū):
上面的“瀏覽”是選擇你要批量做圖片展示的文件夾,也就是上面我們準(zhǔn)備好的"Res_Img"。
下面的“目的”就是PS處理完后存放的文件夾,可以存在你想要保存的位置,我這里面建個(gè)文件夾叫”Pic_Ok"。
“選項(xiàng)”里面就是具體的一些設(shè)置,一共有六項(xiàng),其中一定要設(shè)置的是“橫幅”“大圖像”“預(yù)覽”。
“橫幅”中可以設(shè)置這個(gè)首頁(yè)面html的名稱,也就是html頁(yè)面的Title,再就是聯(lián)系信息,時(shí)間什么的,如果填寫上最后都會(huì)顯示出來(lái)。
而“大圖像”則可以設(shè)置生成“圖片展示”后大圖片的長(zhǎng)寬等,而且PS可以自動(dòng)優(yōu)化圖片大小,當(dāng)然也可以不設(shè)置。
“縮覽圖”可以設(shè)置生成html頁(yè)面中小圖片的大小,也可以設(shè)置個(gè)邊框什么的。我直接用默認(rèn)的“0”。
通過以上設(shè)置后,就可以按“好”了,然后就等著PS把咱的這堆圖片變成一個(gè)圖片展示吧。
如果大家有一些網(wǎng)頁(yè)制作基礎(chǔ),可以將生成的頁(yè)面用Dreamweaver再做一些后期的CSS以及布局方面的優(yōu)化調(diào)整和美化處理。其實(shí)制作網(wǎng)頁(yè)相冊(cè)的方法很多,比如用Dreamweaver和Fireworks也可做圖片批處理并生成相冊(cè),不過我個(gè)人認(rèn)為Photoshop結(jié)合Dreamweaver的效果比較好。簡(jiǎn)單的,我們教你,深?yuàn)W的,你來(lái)分享
一、準(zhǔn)備好自己要做相冊(cè)的素材,產(chǎn)品展示、案例展示、照片展示等都可以,統(tǒng)一將這些圖片放在一個(gè)文件夾下,我這里將這個(gè)文件叫做“Res_IMg",這里面放的都是大的圖片,小圖片一會(huì)兒ps會(huì)為我們做的。
二、打開PS,選擇菜單如下:
三、這個(gè)就是PS制作圖片展示的主要界面啦,主要有以下幾個(gè)樣式:
樣式中可以選擇生成不同的html頁(yè)面的形式,PS CS版本中提供了8種格式,都不錯(cuò)的。
選擇源圖像工作區(qū):
上面的“瀏覽”是選擇你要批量做圖片展示的文件夾,也就是上面我們準(zhǔn)備好的"Res_Img"。
下面的“目的”就是PS處理完后存放的文件夾,可以存在你想要保存的位置,我這里面建個(gè)文件夾叫”Pic_Ok"。
“選項(xiàng)”里面就是具體的一些設(shè)置,一共有六項(xiàng),其中一定要設(shè)置的是“橫幅”“大圖像”“預(yù)覽”。
“橫幅”中可以設(shè)置這個(gè)首頁(yè)面html的名稱,也就是html頁(yè)面的Title,再就是聯(lián)系信息,時(shí)間什么的,如果填寫上最后都會(huì)顯示出來(lái)。
而“大圖像”則可以設(shè)置生成“圖片展示”后大圖片的長(zhǎng)寬等,而且PS可以自動(dòng)優(yōu)化圖片大小,當(dāng)然也可以不設(shè)置。
“縮覽圖”可以設(shè)置生成html頁(yè)面中小圖片的大小,也可以設(shè)置個(gè)邊框什么的。我直接用默認(rèn)的“0”。
通過以上設(shè)置后,就可以按“好”了,然后就等著PS把咱的這堆圖片變成一個(gè)圖片展示吧。
如果大家有一些網(wǎng)頁(yè)制作基礎(chǔ),可以將生成的頁(yè)面用Dreamweaver再做一些后期的CSS以及布局方面的優(yōu)化調(diào)整和美化處理。其實(shí)制作網(wǎng)頁(yè)相冊(cè)的方法很多,比如用Dreamweaver和Fireworks也可做圖片批處理并生成相冊(cè),不過我個(gè)人認(rèn)為Photoshop結(jié)合Dreamweaver的效果比較好。簡(jiǎn)單的,我們教你,深?yuàn)W的,你來(lái)分享
學(xué)習(xí) · 提示
相關(guān)教程
- 網(wǎng)頁(yè)模版,個(gè)人網(wǎng)站建設(shè)入門知識(shí)
- 網(wǎng)頁(yè)模板,設(shè)計(jì)酒吧主題網(wǎng)頁(yè)模板實(shí)例
- ps設(shè)計(jì)藍(lán)色主題風(fēng)格的網(wǎng)站首頁(yè)模板教程
- 從零手把手教你設(shè)計(jì)網(wǎng)頁(yè)
- 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)技巧
- 網(wǎng)頁(yè)設(shè)計(jì)的分割布局秘密
- ps cs6設(shè)計(jì)個(gè)人作品網(wǎng)頁(yè)模板教程
- ps設(shè)計(jì)游戲網(wǎng)頁(yè)實(shí)例
- ps網(wǎng)頁(yè)布局設(shè)計(jì)實(shí)例教程
- ps黑色風(fēng)格網(wǎng)頁(yè)模板
推薦教程
- Photoshop繪制綠色風(fēng)格的尼康相機(jī)網(wǎng)頁(yè)平面圖
- PS教程:設(shè)計(jì)BoxedArt網(wǎng)站模板教程
- Photoshop教程:制作3D網(wǎng)頁(yè)效果
- PS設(shè)計(jì)教程:整潔的具有現(xiàn)代氣息的web站點(diǎn)
- Photoshop教程:制作漂亮的個(gè)人博客
- ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一
- photoshop制作網(wǎng)站流程圖解
- Photoshop制作包含3D元素的網(wǎng)頁(yè)模板布局
- PS設(shè)計(jì)一個(gè)干凈的蘋果iPad產(chǎn)品網(wǎng)站網(wǎng)
- Photoshop教程:制作紅色質(zhì)感網(wǎng)頁(yè)模版
關(guān)注大神微博加入>>
網(wǎng)友求助,請(qǐng)回答!