使用Photoshop(PS)製作框架的步驟如下:
使用矩形工具繪製一箇外框,調整其邊框大小並去除填充。
複製此外框並調整大小,使用Ctrl+T鍵拉伸兩個外框,使它們邊緣銜接。
製作上面的底,使用矩形工具設置半徑爲0,拉伸形狀後右擊選擇斜切,使兩邊傾斜。
繪製一箇較深的顏色框作爲側邊效果,稍微放大圖片,使兩個圖層銜接。
新建一箇空白層,使用框選工具填充深色並加蒙版,創造漸變效果作爲框的投影。
製作上面的紅色標籤部分,使用鋼筆工具繪製形狀並填充顏色,使用直線工具添加白色分界線。
給形狀添加高斯模糊效果,如需更自然過渡,添加蒙版後用畫筆工具擦除邊緣。
選擇紅色標籤部分,添加投影效果,收縮選區後新建空白層,設置描邊效果,添加產品信息和價格文本。
將Photoshop切片轉換爲CSS+HTML的步驟如下:
在Photoshop中切割圖片,導出爲HTML頁面或保存爲Web格式。
在DreamWeaver中佈局,插入相關圖片,或在文本編輯器中根據效果圖逐步製作。
有經驗的設計師可以直接在文本編輯器中寫出網頁框架,不假設未來的CSS渲染。
在各大瀏覽器中運行檢查定位是否準確,然後書寫總體CSS,負責大塊定位及樣式。
切割所需圖片資源,在寫好的框架中構造並調試,最終完成。
在CSS、HTML中添加註釋。