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