店鋪裝修的基礎(chǔ)工具

1、Chapter 04 店鋪裝修的基礎(chǔ)工具 美圖秀秀和DWLOGO目錄4.1 最易上手的商品圖片修飾軟件美圖秀秀4.2 專業(yè)的網(wǎng)頁制作工具DreamweaverLOGO4.1最易上手的商品圖片修飾軟件美圖秀秀 1 認(rèn)識(shí)美圖秀秀認(rèn)識(shí)美圖秀秀美圖秀秀是一款免費(fèi)的圖片處理軟件，不用學(xué)習(xí)就會(huì)用，比Adobe Photoshop簡單很多，能夠?qū)崿F(xiàn)圖片特效、美容、拼圖、場景、邊框、飾品等功能，界面直觀，操作簡單，比同類軟件更好用，其界面如下圖所示。LOGO當(dāng)在美圖秀秀的標(biāo)簽中選擇一種編輯方式時(shí)，會(huì)打開如右圖所示的對話框，在其中單擊“打開一張圖片”按鈕，即可在彈出的對話框中打開所需處理的圖片，此外，還可以通過

2、“打開百度云網(wǎng)盤圖片”和“打開近期編輯過的圖片”功能對所需的圖片進(jìn)行選擇。 在美圖秀秀中進(jìn)行編輯之前，還需要對一些常規(guī)的圖片設(shè)置進(jìn)行更改，為了提高軟件功能運(yùn)行的速度，當(dāng)商品圖片在美圖秀秀中打開之后都會(huì)被進(jìn)行一定程度的質(zhì)量壓縮，可能會(huì)導(dǎo)致我們編輯后的商品圖片不能很清晰的顯示在網(wǎng)店中。遇到這種情況，只需在軟件右上角單擊 按鈕，在彈出的菜單中選擇“設(shè)置”命令，即可打開“設(shè)置”對話框，在該對話框的“保存設(shè)置”和“打開設(shè)置”標(biāo)簽中即可對圖片的壓縮程度進(jìn)行設(shè)置。4.1最易上手的商品圖片修飾軟件美圖秀秀 LOGO4.1最易上手的商品圖片修飾軟件美圖秀秀 2 超炫特效讓寶貝照片一鍵變身超炫特效讓寶貝照片一鍵變

3、身在美圖秀秀中對商品照片進(jìn)行編輯，如果想要拍攝的照片快速實(shí)現(xiàn)一些特殊的效果，可以使用該軟件中的特效來對商品照片進(jìn)行一鍵變身，如右圖所示中可以看到該軟件中的特效區(qū)域中顯示了多種圖片處理效果。在美圖秀秀的一鍵變身操作非常的簡單，將美圖秀秀切換到“美化”標(biāo)簽中，只需在特效顯示區(qū)域的標(biāo)簽中選擇一種需要的特效，在其圖像上單擊，可以快速實(shí)現(xiàn)操作。LOGO4.1最易上手的商品圖片修飾軟件美圖秀秀 3 為寶貝添加美輪美奐的智能邊框?yàn)閷氊愄砑用垒喢缞J的智能邊框在進(jìn)行網(wǎng)店裝修的過程中，有的店家為了讓商品能夠在同類商品中脫穎而出，會(huì)使出渾身的解數(shù)，其中為商品的櫥窗照添加邊框就是一個(gè)常用的裝修方法。為整店的商品櫥窗照

4、添加上統(tǒng)一的邊框效果，不僅可以讓顧客感受到一種統(tǒng)一的視覺，也讓店鋪的品質(zhì)得到提升。美圖秀秀中的“邊框”標(biāo)簽中可以輕松為商品圖片添加上各種類型的邊框，如左圖所示為“邊框”標(biāo)簽中的編輯界面，在界面的左側(cè)可以選擇邊框的類型，右側(cè)則顯示出了邊框的各種預(yù)覽效果。LOGO4.1最易上手的商品圖片修飾軟件美圖秀秀 4 制作個(gè)性動(dòng)感的制作個(gè)性動(dòng)感的GIF圖片圖片 在美圖秀秀中打開一張需要制作閃圖的女鞋圖片，切換到“更多功能”標(biāo)簽的“閃圖”界面中，選擇“動(dòng)感閃圖”來進(jìn)行編輯，如下左圖所示，在界面的右側(cè)選擇“特效”標(biāo)簽中的一種指定閃圖效果，單擊后在界面左側(cè)的“動(dòng)感閃圖”標(biāo)簽中會(huì)顯示出當(dāng)前使用的閃圖特效的每個(gè)幀的畫

5、面效果，完成閃圖的編輯后，單擊“修改閃圖大小”和“保存”按鈕可以打開相應(yīng)的對話框，在其中可以對選項(xiàng)進(jìn)行設(shè)定，控制閃圖的大小及保存的位置和名稱，如下圖所示。LOGO4.1最易上手的商品圖片修飾軟件美圖秀秀 5 拼圖功能讓寶貝全方位展示拼圖功能讓寶貝全方位展示在進(jìn)行網(wǎng)店裝修的過程中，有時(shí)候?yàn)榱俗岊櫩椭庇^的感受到商品的細(xì)節(jié)，會(huì)在進(jìn)行網(wǎng)店裝修的過程中，有時(shí)候?yàn)榱俗岊櫩椭庇^的感受到商品的細(xì)節(jié)，會(huì)將商品的各個(gè)部位進(jìn)行放大展示，并且將其拼合在一個(gè)畫面中，這時(shí)拼圖操將商品的各個(gè)部位進(jìn)行放大展示，并且將其拼合在一個(gè)畫面中，這時(shí)拼圖操作就顯得非常的必要了。作就顯得非常的必要了。在美圖秀秀中可以通過簡單的操作實(shí)現(xiàn)多

6、張圖片的拼接，如右圖所示為美圖在美圖秀秀中可以通過簡單的操作實(shí)現(xiàn)多張圖片的拼接，如右圖所示為美圖秀秀中秀秀中“拼圖拼圖”標(biāo)簽中的界面效果，在其左側(cè)顯示出了標(biāo)簽中的界面效果，在其左側(cè)顯示出了“自由拼圖自由拼圖”、“模模板拼圖板拼圖”、“海報(bào)拼圖海報(bào)拼圖”和和“圖片拼接圖片拼接”四種拼圖方式，用戶可以根據(jù)喜好四種拼圖方式，用戶可以根據(jù)喜好和需要來進(jìn)行選擇。和需要來進(jìn)行選擇。LOGO4.1最易上手的商品圖片修飾軟件美圖秀秀 6 為商品照片添加上水印為商品照片添加上水印在美圖秀秀中有一個(gè)專門用于編輯文本的“文字”標(biāo)簽，如下圖所示，該標(biāo)簽中可以為圖片添加任意的文字，并能對文字的顏色、效果、大小等外觀屬性

7、進(jìn)行設(shè)置，接下來就讓我們一起來學(xué)習(xí)如何在美圖秀秀中制作水印。LOGO4.1最易上手的商品圖片修飾軟件美圖秀秀 7 使用美圖秀秀批量處理商品照片使用美圖秀秀批量處理商品照片 在美圖秀秀的首頁中單擊“批量處理”按鈕，可以通過該功能對網(wǎng)店裝修中的多張照片進(jìn)行批量處理，大大提高網(wǎng)店裝修的效率。在單擊“批量處理”按鈕后，沒有安裝批量處理插件的會(huì)自動(dòng)對該插件進(jìn)行加載，成功安裝后，單擊“立即體驗(yàn)”按鈕，即可進(jìn)入到美圖秀秀的批量處理模式中，如下圖所示。LOGO4.2專業(yè)的網(wǎng)頁制作工具Dreamweaver1 認(rèn)識(shí)認(rèn)識(shí)Dreamweaver工欲善其事，必先利其器，在學(xué)習(xí)的開始，讓我們一起來了解工欲善其事，必先利

8、其器，在學(xué)習(xí)的開始，讓我們一起來了解Dreamweaver CC的操作環(huán)的操作環(huán)境。在首次啟動(dòng)境。在首次啟動(dòng)Dreamweaver CC時(shí)會(huì)出現(xiàn)一個(gè)歡迎界面，在這個(gè)頁面中包括時(shí)會(huì)出現(xiàn)一個(gè)歡迎界面，在這個(gè)頁面中包括“打開最近打開最近項(xiàng)目項(xiàng)目”、“新建新建”和和“主要功能主要功能”這三個(gè)方便實(shí)用的項(xiàng)目，具體顯示效果如右圖所示。這三個(gè)方便實(shí)用的項(xiàng)目，具體顯示效果如右圖所示。新建或打開一個(gè)文檔，進(jìn)入新建或打開一個(gè)文檔，進(jìn)入Dreamweaver CC的標(biāo)準(zhǔn)工作界面，如下圖所示，其中包括了的標(biāo)準(zhǔn)工作界面，如下圖所示，其中包括了菜單欄、代碼視圖、設(shè)計(jì)視圖和多個(gè)懸浮的面板。菜單欄、代碼視圖、設(shè)計(jì)視圖和多個(gè)懸

9、浮的面板。LOGO4.2專業(yè)的網(wǎng)頁制作工具Dreamweaver2 用表格功能制作商品尺寸簡介用表格功能制作商品尺寸簡介在編輯某些商品的詳情頁面的過程中，由于經(jīng)營產(chǎn)品的特殊性，經(jīng)常要在自家寶貝描述當(dāng)中為寶貝的實(shí)際尺寸、材質(zhì)、規(guī)格等進(jìn)行介紹，以方便顧客對商品的信息有更加深入的了解。利用Dreamweaver中的表格可以快速制作出寶貝描述信息，接下來將通過具體的步驟來對其操作進(jìn)行講解，LOGO4.2專業(yè)的網(wǎng)頁制作工具Dreamweaver3 為網(wǎng)頁元素添加超鏈接為網(wǎng)頁元素添加超鏈接在網(wǎng)店首頁的裝修的過程中，為了給顧客更多的信息，或者讓顧客更方便的對某些區(qū)域的信息進(jìn)行擴(kuò)展了解，需要為特點(diǎn)的區(qū)域添加上

10、超鏈接。這里給大家介紹如何使用Dreamweaver給圖片特定區(qū)域添加超鏈接，以本書中的案例圖片為素材，給大家演示一下具體的操作步驟，LOGO4.2專業(yè)的網(wǎng)頁制作工具Dreamweaver4 插入圖像更改網(wǎng)頁顯示效果插入圖像更改網(wǎng)頁顯示效果在Dreamweaver中還可以輕松的為設(shè)計(jì)的網(wǎng)店插入所需的圖像，其操作也非常的簡單，只需要使用“圖像”功能即可輕松插入所需的圖像到文件中，具體如下。新建一個(gè)html文件，打開“插入”面板，在“圖像”下拉列表中選擇“圖像”選項(xiàng)，接著在“選擇圖像源文件”對話框中選中需要添加的照片，單擊“確認(rèn)”按鈕將所需的照片添加到文件中，使用“拆分”模式可以看到插入的圖像效果

11、。LOGO4.2專業(yè)的網(wǎng)頁制作工具Dreamweaver4 插入圖像更改網(wǎng)頁顯示效果插入圖像更改網(wǎng)頁顯示效果此時(shí)插入的圖像大小為原始大小，可以按住此時(shí)插入的圖像大小為原始大小，可以按住Shift鍵的同時(shí)使用鼠標(biāo)在圖像直鍵的同時(shí)使用鼠標(biāo)在圖像直角位置單擊并拖曳，調(diào)整圖像的大小，或者直接在角位置單擊并拖曳，調(diào)整圖像的大小，或者直接在“屬性屬性”面板的面板的“寬度寬度”和和“高度高度”數(shù)值框中輸入所需的像素值，如下圖所示。數(shù)值框中輸入所需的像素值，如下圖所示。LOGO4.2專業(yè)的網(wǎng)頁制作工具Dreamweaver4 插入圖像更改網(wǎng)頁顯示效果插入圖像更改網(wǎng)頁顯示效果單擊“屬性”面板中的“提交圖像大小”

12、按鈕，在彈出的對話框中直接單擊“確定”按鈕，即可在預(yù)覽區(qū)域看到操作后圖像中的鋸齒消失，如上圖所示。在Dreamweaver中可以設(shè)置鼠標(biāo)經(jīng)過圖像的圖像變化效果，鼠標(biāo)經(jīng)過圖像實(shí)際上由兩個(gè)圖像組成，原始圖像就是當(dāng)首次載入頁時(shí)顯示的圖像，鼠標(biāo)經(jīng)過的圖像就是當(dāng)鼠標(biāo)指針移過主圖像時(shí)顯示的圖像，它們共同組成“鼠標(biāo)經(jīng)過圖像”的內(nèi)容。這兩張圖片要大小相等，如果它們的尺寸不相等，Dreamweaver自動(dòng)調(diào)整兩個(gè)圖像大小一致。單擊“插入”面板“圖像”下拉列表中的“鼠標(biāo)經(jīng)過圖像”選項(xiàng)，在彈出的“出入鼠標(biāo)經(jīng)過圖像”對話框中可以設(shè)置相關(guān)的選項(xiàng)，如下圖所示。LOGO4.2專業(yè)的網(wǎng)頁制作工具Dreamweaver5 文本的輸入和編輯文本的輸入和編輯文本是網(wǎng)店裝修頁面中最常見、運(yùn)用最廣泛的元素之一，是網(wǎng)頁內(nèi)