爱购论坛

 找回密码
 立即注册
搜索
查看: 6035|回复: 10

[图文教程] 旺铺2012全屏海报教程,用新旺铺导航做直通店招的超炫页面大图

[复制链接]
发表于 2013-2-26 20:29:53 | 显示全部楼层 |阅读模式
淘宝新旺铺2012推出后,小卖家可以免费使用,新旺铺使用起来的确易用好用, 让一直用扶植版的小卖家们感受到了超爽的大量自定义页面, 为了规范装修,导航条与店招的大小位置是固定的,许多新手卖家都想做出大气磅礴的首页,我们可以通过新导航提供了CSS样式编辑功能将导航融入页面中,做个超大页面的效果吧! 一、背景图制作首先找一个适合自己风格的素材页面,PS加工一下,开工 ! T2oRbiXktaXXXXXXXX_!!372657693.jpg 这是网上顺手找的一张的图片,PS后尺寸为1920*880像素 T2bZPjXcxaXXXXXXXX_!!372657693.jpg 图片高度可以根据自己的需要的效果来定,宽度1920是为了配合21寸以上显示器使用,为了兼顾小显示器的买家,建议在1024像素内就可以显示图片的主题,1440像素要基本显示整个图片,1920像素多出来的部分最好全是背景色。 首先,PS打开图片后,将背景图复制一下,这一步主要是因为分层后调整画布大小可以扩展回来,效果如下: T2TCvjXghXXXXXXXXX_!!372657693.jpg 然后点选菜单栏-图像-画布大小,注意定位先中间上部的方块,如下所示: T2A0jjXgNaXXXXXXXX_!!372657693.jpg 点击确定后,效果如下: T2Rp1hXb8cXXXXXXXX_!!372657693.jpg 点选菜单栏-文件-存储为Web和设备所用格式,效果如下: T2pOvjXfJXXXXXXXXX_!!372657693.jpg 这里注意颜色选256色,其它色效果差很多,然后点击下面的存储,弹出的对话框直接确定,然后效果如下: T2aQlnXdROXXXXXXXX_!!372657693.jpg 这是我们需要的店招图,文件名我命名为店招图,点击保存接下来点取工具栏里的 矩形选框工具将PS里的整个图片选取,如下所示: T2wQBxXalOXXXXXXXX_!!372657693.jpg 这个图我们已经不需要了,点击组合键ctrl+X,切除此图,效果如下: T25KnjXihaXXXXXXXX_!!372657693.jpg 现在点击菜单栏-图像-画布大小,设置如下: T23S_jXaxXXXXXXXXX_!!372657693.jpg
匿名
匿名  发表于 2013-2-26 20:33:08
同样注意定位的位置点选,确定后,效果如下:
T2ThnjXotXXXXXXXXX_!!372657693.jpg
再点选菜单栏-图像-画布大小,设置如下:
T2E5LjXXNaXXXXXXXX_!!372657693.jpg
宽度选950,这时的高度注意一下,高度框填写的数值是整图的大小减去160像素,因为我选的这张图的尺寸是880像素的,所以填写720,例如你的图片高度是700像素,这时应该填写540像素。
同样注意定位,点击确定后,效果如下:
T24htPXbVeXXXXXXXX_!!372657693.jpg
这张是我们要的放在首面第一个自定义区的图片,点选菜单栏-文件-存储为Web和设备所用格式,将它存取出来
T2BPJHXf4NXXXXXXXX_!!372657693.jpg
还是点击右下角的存储,弹出的对话框直接确定,然后效果如下:
T2iGzjXh4aXXXXXXXX_!!372657693.jpg
文件我命名为首面自定义区,保存后返回PS
在PS里选择工具条里的 矩形选框工具,选取整个图片,效果如下:
T2JWuGXXtcXXXXXXXX_!!372657693.jpg
这个图片区域我们已经存取好,也不需要了,点击组合键ctrl+X键,切除它,效果如下:
T2Ti_jXaFXXXXXXXXX_!!372657693.jpg
然后点选菜单栏-图像-画布大小,设置如下:
T2fcDjXjpaXXXXXXXX_!!372657693.jpg
现在的设置是恢复原图的大小,点击确定后返回,效果如下:
T2x46iXX8aXXXXXXXX_!!372657693.jpg
然后再点选菜单栏-图像-画布大小,设置如下:
T203rjXb4aXXXXXXXX_!!372657693.jpg
150像素是整个头部页面的大小,点击确定后,效果如下:
T2pPrjXlxXXXXXXXXX_!!372657693.jpg
这是我们要的页头背景了,点选菜单栏-文件-存储为Web和设备所用格式,存取出来
T2HTPiXgJaXXXXXXXX_!!372657693.jpg
点击存储,弹出对话框点确定,文件命名为 页头背景图
T2MorjXXlXXXXXXXXX_!!372657693.jpg
保存后返回,将PS里面的图片用矩形框选择工具选择整个图片
T2EHfjXjRaXXXXXXXX_!!372657693.jpg
这块图区我们也不需要了,点选组合键ctrl+X,切除,效果如下:
T2Sxu.XadbXXXXXXXX_!!372657693.jpg
再点选菜单栏-图像-画布大小,恢复原图大小,设置如下:
T2IInjXd0aXXXXXXXX_!!372657693.jpg

确定后,效果如下:
T2pgGFXepcXXXXXXXX_!!372657693.jpg
这是我们要的页面背景图了,再存取出来吧
T27kJNXg0XXXXXXXXX_!!372657693.jpg
文件名保存为页面背景图
T2jF6jXfFXXXXXXXXX_!!372657693.jpg
保存后,我们需要的页面图就全部做完了,就可以开始装到店铺里了

二、装修店铺

首先打开装修界画
T2ewW_XbdbXXXXXXXX_!!372657693.jpg


匿名
匿名  发表于 2013-2-26 20:35:12
点装修 菜单-选样式编辑
T2pLPjXcJaXXXXXXXX_%21%21372657693.jpg
先设置页头背景,点 上传图片,选择我们的页头背景图
T2PPaZXctbXXXXXXXX_%21%21372657693.jpg
点击右下角打开
T2duqTXcpbXXXXXXXX_%21%21372657693.jpg
这里注意一下右边背景显示及背景对齐的选择,然后点保存,然后点选上面的页面设置
T20tPfXb4bXXXXXXXX_%21%21372657693.jpg
点击上传图片,将我们做好的,页面背景图传上来
T2AcjjXbhaXXXXXXXX_%21%21372657693.jpg
同样是点击打开,上传后界面如下:
T2i.KJXXJcXXXXXXXX_%21%21372657693.jpg
这里还是注意一下背景显示与背景对齐的选择,然后点击保存,之后点击菜单栏装修-页面编辑
T2I7LiXndaXXXXXXXX_%21%21372657693.jpg
现在做店招的上传了
T2ktdnXeROXXXXXXXX_%21%21372657693.jpg
鼠标指向店招,点击店招图上显示的编辑,出现如下界面:
T2DYYjXhxaXXXXXXXX_%21%21372657693.jpg
点选默认招牌,注意是否显示店铺名称,不要点选,如果是点选状态,取消一下,高度120px,然后点保存
T22ixtXeXNXXXXXXXX_%21%21372657693.jpg
点击选择要上传的图片,选择我们的店招图
T29FjjXjXaXXXXXXXX_%21%21372657693.jpg
点击打开


匿名
匿名  发表于 2013-2-26 20:36:20
T2xKFaXbFOXXXXXXXX_%21%21372657693.jpg
然后点击 上传
T2vzYjXjtXXXXXXXXX_%21%21372657693.jpg
上传好后,上部会出现 插入 ,点击它,插入图片
T2SSXgXeBOXXXXXXXX_%21%21372657693.jpg
点击保存,回到页面编辑页了,现在开始做自定义页面
T2y1jjXjRaXXXXXXXX_%21%21372657693.jpg
鼠标划过自定义区页面,点击右上方的编辑,自定义区没有,添加模块建立一个,并移到最上方,点编辑后效果如下:
T2nHHjXhpaXXXXXXXX_%21%21372657693.jpg
点击插入图片图标
T2MiTjXnhXXXXXXXXX_%21%21372657693.jpg
点击 选择要上传的图片,选择我们刚才制作的首页自定义区图片
T2ZBtcXaJOXXXXXXXX_%21%21372657693.jpg
点击右下角的打开
T26txXXfROXXXXXXXX_%21%21372657693.jpg
同上面一样,点击上传
T2QJjjXXpaXXXXXXXX_%21%21372657693.jpg
插入后,点击完成
T2rgHiXltXXXXXXXXX_%21%21372657693.jpg
点选 不显示 标题后,确定,效果如下
T2RzzjXfxXXXXXXXXX_%21%21372657693.jpg
现在只差导航CSS代码编辑了,鼠标指向首面导航区,点击编辑,出来的窗口,选取上方的显示设置
T2rnrjXbdXXXXXXXXX_%21%21372657693.jpg

输入如下代码: T2f8ziXn4XXXXXXXXX_%21%21372657693.jpg
代码主要是隐藏原来的背景,并取消全部分类的显示,最后面一条的{color:#CF6AA6}是字体颜色,可以根据自己的喜好自己调整一下,色值从PS里取就可以了,点击 确定
T2iULiXhJaXXXXXXXX_%21%21372657693.jpg
制作完成,点右上角 发布,效果如下
T2jczjXbhaXXXXXXXX_%21%21372657693.jpg

因为我的显示器分辨率是1440的,这个截图是缩放后的效果,会出现白色细线,正常显示不会出现。
有朋友喜欢将导航栏彻底隐藏,然后这样首面效果不错,但对于其它页面就会没有导航,买家无法回到首页,客户体验不好,如果对导航栏的导航条效果比较在意,可以在ps编辑页头背景时加上一条透明图层,效果如下
T2s8TiXj8aXXXXXXXX_%21%21372657693.jpg
到此首页大图的制作就完成了,因为这个图片是临时网上下载的,各位新卖家可以到网上找一些适合自己店铺特色的图片,效果会更好,需要注意的是在初期做图时,也要考一下店招在其它页面的显示效果,就是说,上部150像素的高度单独显示效果也要和谐。
发表于 2013-3-5 16:15:16 | 显示全部楼层
进来学习一下
发表于 2013-3-6 01:12:41 | 显示全部楼层
新人,谁能教教我啊
发表于 2013-3-11 17:14:17 | 显示全部楼层
CSS代码怎么提取啊
发表于 2013-4-17 16:37:12 | 显示全部楼层
菜鸟 进来逛逛
发表于 2013-4-28 21:58:17 | 显示全部楼层
版主,是不是把底色调整成纯色,然后把导航设置成背景透明,然后利用自定义或者图片轮播把开头图放在首位,这个图片颜色和底色一致,加点标语就可以成功了,是不是啊,我看完你的帖子,动手试了下,就按照我的想法,成功了,就是导航那里不会设置成底色透明
发表于 2013-5-15 09:50:53 | 显示全部楼层
呵呵,学习了!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

网店装修|淘宝店铺装修免费模板|专业版模板|淘宝装修教程|淘宝大学|淘宝素材|淘宝店铺装修视频教程|店招在线制作|爱购论坛  

GMT+8, 2019-2-23 14:48

快速回复 返回顶部 返回列表