2022年淘宝模板超详细制作教程 .pdf

淘宝店铺模板制作通用版教程第一步首先要准备2 款软件：1. PScs3此版本功能全内存低下载地址： 2. Dreamweaver8.0推荐 8.0 下载地址： 效果演示：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 28 页 - - - - - - - - - 首先我们要准备7 个店铺里面比较漂亮的宝贝图片！你也不一定按照我这个排列也以根据自己的宝贝自己排列！下一步打开 PS 点击文件新建名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 28 页 - - - - - - - - - 然后会出来一个对话框宽度是 750 像素 长度 703 像素 （也可以根据自己的图片大小自己设定）！设置完以后点确定！接下了就是先给图片排版！不大会PS 的童鞋 注意啦！ ！先按一下 Ctrl+R 把标尺找出来方便等一下的排版名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 28 页 - - - - - - - - - 标尺出来以后然后点击 PS右边的直线选项按住 Shift 不要放点击鼠标左键在编辑框中画出模板边框本模板分为两排上一排是 250X404像素一个 下一排是 188X299一个 不会的照着下面图片尺寸做也行！名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 28 页 - - - - - - - - - 等边框画好以后在 PS右下角找到你画的图层点右键然后点像素画图层名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 28 页 - - - - - - - - - 点完以后我们的模板边框就做好啦！ ！等边框做好以后我们就可以把准备好的图片放到模板里面去了！点找到你准备好的图片然后直接拖到PS里面去调整图片大小名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 28 页 - - - - - - - - - 点击图像下面的画布大小第一排三个大图片尺寸是 240 x242像素 下面拍四个图片是175X248 像素画布大小调整好以后找到编辑选项然后点击自由变换 把宝贝图片调整到和画布边框一样大的位置！名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 28 页 - - - - - - - - - 调整好后安一下回车键确认名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 28 页 - - - - - - - - - 等图片调整好大小以后点选择按钮直接把调整好以后的图片拖到模板里面！调整好相应位置OK 把图片放到相应的位置以后效果就是这样啦！接下来我们就把标题和价格给它添加上去吧！我们先用矩形选框工具框出一个长方形来！名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 28 页 - - - - - - - - - 然后点选到背景选项找到左边的渐变工具选好颜色名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 28 页 - - - - - - - - - 按住键盘 Shift 键 点鼠标左键从左往右拉！名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页，共 28 页 - - - - - - - - - 上面是效果拉好以后找到 选择工具点一下选择框按住 Ctrl+C 复制 然后再按住 Ctrl+V粘贴粘贴完以后点点击鼠标左键不要放把复制的渐变条做到相应的格子下面！名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 12 页，共 28 页 - - - - - - - - - 哈哈这一步完成以后我们就可以在粉红色的渐变格子上面添加文字勒！找到文字按钮选好颜色我选的是白色接下来就打字(?) ！ ！记得每个长方形上面都要打上喔！名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 13 页，共 28 页 - - - - - - - - - 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 14 页，共 28 页 - - - - - - - - - 哈哈(*_*) 嘻嘻有点像那么一回事儿了喔！ ！ ！继续我们在添加一个价格上去！吧！先选好字的颜色咋找一个人民币的符号！后面打上价格 ！当然如果童鞋你卖宝贝用的的是美元也可以用美元的符号的！ O(_)O名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 15 页，共 28 页 - - - - - - - - - 价格打好以后找到右下角这个按钮选到描边！把颜色换成浅灰色、点确认就可以啦！名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 16 页，共 28 页 - - - - - - - - - 等设置好以后把价格图层复制一下然后拖到每个宝贝右下角就可以了名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 17 页，共 28 页 - - - - - - - - - 效果出来啦！O(_)O 哈哈！名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 18 页，共 28 页 - - - - - - - - - 接下来我们在添加一个宝贝标题就快完工啦！继续加油！ (o)/ 找到文字编辑按钮好颜色 把宝贝标题打上去哈哈 标题打上去以后就完成一半啦！ ！ ！(*_*) 嘻嘻 下面是效果！名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 19 页，共 28 页 - - - - - - - - - 好我们再来下一步吧！等上面都完成以后找到切片工具然后按住鼠标左键从左上角往右下角拉！把每个格子分开切片！切片好以后如下图名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 20 页，共 28 页 - - - - - - - - - 等切片完成以后找到文件选项选择保存为 Web 格式名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 21 页，共 28 页 - - - - - - - - - 然后会出现这个！里面就不用调了直接点击确定就好！名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 22 页，共 28 页 - - - - - - - - - 确定以后新建一个文件夹然后保存在里面名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 23 页，共 28 页 - - - - - - - - - 接下来会出现一个对话筐不用管它点确定就好！OK PS 这部分就算完了！ 把源文件保存以后就可以关掉 PS了！关掉 PS以后找到你刚刚保存的Web 文件打开！里面有一个网页文件一个图片文件夹把图片文件夹里面的图片全部上传到你的 网络空间里面去！然后打开把 HTML 文件拖到里面去 !名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 24 页，共 28 页 - - - - - - - - - 如下图接下来就要把每个图片的本地地址！换成你图片空间的地址！名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 25 页，共 28 页 - - - - - - - - - 第一个填写图片地址第二个填写宝贝连接地址名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 26 页，共 28 页 - - - - - - - - - 等把所有图片地址和宝贝连接都转换和添加完以后模板就制作成功啦！ (?) 模板做好了以后！只要把代码框里面的代码全部复制到 店铺之定义框里面点保存就可以啦！名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 27 页，共 28 页 - - - - - - - - - ！ 汗 终于完成勒！头都搞的晕晕！的 ！%_% ！也不知道有没有搞漏的！各位童鞋就将就看吧！ ！ 不懂的可以来问我！喔！不明白的加我旺： qinzimao123 http:/ 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 28 页，共 28 页 - - - - - - - - -