下面我们言归正传，今天要做的是首页右侧模块的设计，事实上大家可能都知道淘宝买家大部分都是通过搜索宝贝进入的店铺，也就是直接进入到的宝贝详情页面，但是这样首页就不重要了吗？NO！我不清楚别人的习惯，但是我自己每进一个店铺都会先进一下这个店铺的首页，去看一下店铺的装修，就算是当时没有任何的购买意向，只要装修精美的，我都会收藏一下，方便以后用到的时候查找，大家都知道说一个人的时候，内在的东西是很重要的，可是内在的东西只有接触了以后你才会真正的了解，所以表象很重要，也就是第一视觉印象很重要，因为它吸引别人去更加深入的去了解你，只有接触了才会发现你内在的美，对不对呢。
先上效果图看一下：
这个图是牛仔裤专题的一个右侧模块，对于一些专题的设计，也就是相对于某一个单独的类别来讲，应该更简单一些，因为目的明确，所以更有利于我们去表达视觉上的亮点，有力的去抓住一个点，这时候你知道自己想要的是什么，什么样的表现更适合，才会更有力的展示。本来在这个位置要举一个很合适的例子来说明一下，不过小女子不才，记忆能力不咋地，把重要的人物给忘了，所以在这里也就不好说了，跳过吧。
接下来我们就不要做语言的矮子了，那要做什么？答对了，做行动的巨人。
Go！Go！Go！加油 加油
下面我们还是要从最基础的开始讲，因为可能有淘友没有接触过photoshop这个软件，所以大家不要着急，慢慢来。在这里要跟大家说一下，我用的是photoshop CS2版本的，如果你没有这个软件可以去百度搜索一下，输入photoshopCS2 下载，百度一下，就可以看到网页里面的搜索列表了，下载后安装会出现这样的一个图标
出现在桌面，然后我们通过双击鼠标左健打开这个软件，界面如下图
进入界面以后，界面里面除了左侧工具箱和右侧的面板以外，整个的底色都是灰色的，那接下来我们开始新建一个文件，首先我们要了解一下右侧模板的尺寸，那在淘宝首页的右侧模板这个宽度的尺寸是固定的，也是750像素，高度呢是不限的，所以接下来我们新建一个文件，一般情况下我做这个模块的时候，都会知道自己想要多大的版面去设计和表现，所以建立以后基本上都不会做更改，但是你不要害怕，即便是你设计到最后了才发现文件小了，不够大，没关系，我们还可以加长的，知道吗？那在这里，这个文件的尺寸宽是750像素，高是1147像素的，我们可以直接新建一个这样大小的文件。接下来跟着我的步骤操作，打开photoshop软件，进到界面以后，将鼠标移向界面的左上角，也就是软件的菜单项，单击‘文件’这个菜单，弹出下拉列表框，点击‘新建’这个选项如图：
点击后出现新建对话框：
在名称一栏里面我们输入我们存储这个文件时的名字，宽度和高度的后面，我们先看下图的蓝色显示的栏，这一栏呢是单位，因为我们应用于网络上，也就是只是在显示屏上来看的，那我们选择像素这个单位，然后在宽度和高度后面直接输入我们要的尺寸，宽度750，高度为1147就好了
输入尺寸以后我们看下图，蓝色数字的位置前面标有分辨率，这个我们用72就可以了，颜色模式的位置也是应用RGB这个三原色的模式就好，其他为默认就好，然后单击确定按钮。
按确定以后就会在界面里出现一个窗口如图：
下面我们开始设计，在接触设计的时候大家都有听过‘素材’这个词吧，嗯，很重要的，一种是修饰，一种是主题。我们在开始做设计之前，首先要先去了解商品，然后呢抓住一个点去表达，也就是你要表达形式，心里面大概的会有一个构思，然后搜集一些对应的素材，对于这个，因为是牛仔裤，所以就有想到牛仔布，但是结果还是很不理想，因为对方没有给我文字，只有图片，所以其他的都要靠自己去发挥。接下来就是去看那些商品图片，当你不断的去了解的时候，事实上灵感就会在某个瞬间一触即发了，就像我一样的，看到下面这张图片，灵感就闪现了
我们把这个图片在PS（photoshop简称PS）里面打开，如何打开知道吗？不知道的话看图：
鼠标点击软件左上角‘文件’菜单，然后在下拉列表中选择‘打开’选项即可
此时界面如图：
下面我们把这张图片拖到新建文件里面去，选择工具箱上面的，工具箱就是界面左侧这个条形框，里面都是我们用来做图的工具，
选择那个箭头，然后将鼠标移到图片上，按住鼠标左键不放拖到新建的文件里面去，如下图，拖过去以后，我们把打开的图片关闭就可以了
因为相机照出来的图片的像素高，所以尺寸会大，这时候我们看到新建文件里面的图片只显示了一部分，那接下来我们就缩放一下这个图片，先在新建文件的标题栏（也就是蓝色显示的位置）双击鼠标，将文件窗口放大，如下图
这时候我们按ctrl+T组合键将图片缩一下，当按下组合键的时候，会出现如下图的控制框，如果你的看不到，按Ctrl+减号键将窗口缩小，注意这个时候并不是缩放的图片，只是窗口而已，缩小以后你就可以看到控制框了如下图
此时，将鼠标移向右上角的控制点位置，当鼠标出现双向箭头时，左手按下ctrl+Alt键，这个是等比例缩放，不会使图片变形，同时按住鼠标左键不放，向里拖动，直到你觉得合适为止，如图这样
到此时为止，我们并不能确定将这个图片缩放到多大合适，因为后面要根据我们的排版再进行缩放，那此时图片我们确定了，怎么去表现呢，我想要的是一种简洁、大气而且又不失为一种品牌化的视觉感受，那说到这里大家肯定有看到过一些杂志啊，电视啊，或者网络上做的一些品牌类的视觉印象，所以呢我选择的这一张图片，腰带和口袋上都有一些亮片，这个很符合年轻人，时尚而且潮，很吸引眼球，那我们通过排版设计让它更加突出。
做到这里呢，我在网上查了一些关于牛仔裤的资料，去了解一下关于牛仔裤的信息，至少应该找到一句合适的广告语，最后确定这句‘牛仔裤 一年四季不凋零的明星 百搭服装之首’，我觉得这个很合适，因为我自己很喜欢穿牛仔裤，所以搭上衣的时候即使特别随意了也不会让自己太丑，嘿嘿
接下来我们开始排版，首先我们先要建立一个长方形，如同下图这样，
我们先建立一个图层，我们调出图层面板，如下图右侧的这个就是图层面板，如果你的没有显示，请按下键盘上的F7键就调出来了，
那我们看一下这个面板最下面的一排按钮，点击右边数第二个新建按钮，新建一个图层出来，
下面开始建立一个黑色的背景块，建立方法是到左侧的工具箱里面找第一个工具就是选框工具，点击它以后，你的鼠标会呈现十字光标形式，然后按住左健不放拖动，会有蚂蚁线出现
然后我们按下D字键，将颜色转换为黑白色，像下面图片里，工具箱上显示的黑白块儿一样，黑色为前景色，白色为背景色，然后按住Alt+回格键给选区里面填充黑色，
还是要看我们先前选择的这张图片，建立黑色块以后，图片就被挡住了，这时候我们在图层面板里，选中图片的那个图层按住鼠标左键不放向上拖，拖到新建的那个图层上面，就可以显示了，此时你的图层如下
现在我们把图片置入到黑色矩形框里面，我们不对图片裁切，这样方便我们下一步操作，接下来，按住你左手边的Alt键，将鼠标移向图片和黑色矩形框中间位置，如下图红色框线的位置，鼠标会出现一个带箭头和两个叠加的圆的图标，
将鼠标按下，如下图所示
此时的图片文件只会显示和矩形框一样的大小，那是因为我们把图片的其他部分都隐藏了，接下来我们将图片做一下调整，也就是调整它的大小和位置，还记得如何调整图片大小吗？对了，按住ctrl+T键，出现控制框以后按住shift的键是等比例缩放，同进按住shift+Alt键就是等比例向中间位置缩放，然后同时调整图片的位置，随时松开鼠标移动图片的位置，OK以后，双击就可以了。此时效果如图
下面的工作就是去除牛仔裤的背景颜色，因为这个图片的背景还是比较单一的，而且背景与裤子的颜色差值也比较大，所以，我们就选用魔棒工具选中背景的那个颜色，魔棒工具在工具箱右侧那排第二个，此工具的选项我们看一下紫色显示的位置
然后选择图片上的背景单击，同时选择多块的时候，按住shift键就OK了，此时会出现蚂蚁线（要确定你当前的图层在图片图层哦），如下图
此时按下删除键将此颜色删除掉，OK，你们很棒哎，如下图
到这里呢，如果你的图片效果不是很理想，可以通过一些命令或者工具去调整一下，那下面就是向图片上面添加文字如下面的效果图，右上角的位置可以放上自己店铺的名称和标志，在这里因为不方便放店铺名称，所以找了这几个字来代替一下，
在工具箱中选择以‘T’字母显示的工具，然后在页面上单击输入文字，然后选择‘窗口’菜单点击‘字符’选项，将字符面板调出来，如图
单击字符面板出现下图：
我们通过面板上的选项对文字进行设置，文字下面还有一层白色字，只把你的文字复制一个层，或者直接按ctrl+J键就可以复制了，然后把下面一层文字改成白色，移动一下位置就好了，风字可以单独的打一个字，然后通过字符面板进行调整，下面的文字直接输入进去，然后调整文字大小，和运用不同的字体，大字我们就要用粗一些的字体，小字就要用细一些的，因为我们要做的品牌化一些，所以要用一些正规的给人以安全、沉稳、严肃的感觉，如图
此时我们再看一下整体的效果，
这个时候我感觉还是缺少点儿什么，所以呢，我们就再加一些字母，打上‘FASHION’然后填充白色，按下键盘上的数字键可以调节一下文字的透明度，调整大小和位置，如下图
现在有没有感觉和上面不一样，那当然，要的可是这种效果哦
现在是不是有些累了，站起来活动一下好了，经常坐着对身体不好，去运动运动吧。
5分钟时间到，OK，我们现在继续，接着我们在图片下方在用选框工具建立一个矩形，同建立这个大的黑色矩形一样的方法，我相信你依然还记得的，你很棒哦，然后又要用到文字工具了，选择文字工具以后呢，我们在屏幕上输入小于号‘<’，这个键在你的键盘上，M字母的右边，在英文状态下按着shift键的同时间输入就OK了，一直按下去，直到像我们通常的那样，然后通过字符面板工具调整一下大小，就像下图这样的，
我们成品图上是两行对吧，而且方向正好是相反的，好下面我告诉你怎么做另一行，而且调整方向，按下ctrl+J键复制一个层，用移动工具向下移动这个图层，然后按下ctrl+T键，单击鼠标右键，弹出来下图的选项
点击蓝色显示的选项，水平翻转，双击完成，调整一下位置，OK，然后我们就开始下面的这块比较有创意的部分，（有些自恋啊，不过这个地方是我最喜欢的啦）上下的图片虽然断开了，但是视觉上还会有连接的感觉，
首先我们先来建立一个矩形，宽度是和你建立的这个文件宽度一样的，高度随意，方法和上面一样，然后填充白色，双击这个白色块的图层，弹出下图图层样式对话框，点击最下边蓝色显示的选项，然后我们进行设置，各选项参数如下图所示就好，
然后我们在这个矩形框的顶端再建立一个选区如下图那个虚线显示框，
现在不要填充颜色，选择牛仔裤的图片，怎么选择呢，在牛仔裤图层上单击鼠标右键，选择第一个图层就是了，然后按上ctrl+J键复制这个图层中的一部分，然后按住ctrl+shift+}（大括号）键将这个图层放到上顶层，此时你就会看到奇迹出现了，对吧
此时效果如图
此时我们看到图片的右边短了一些，没关系，用选区工具在图片的右边画一个矩形（在图片的右边，一定要只选中黑色的部分），然后呢，按住ctrl+T键，按住鼠标左键不放向右拖放就好，OK啦往下看，我们看到图片下面有断断续续的线对不对，对啦，还记得上面我们输入的小括号吗？对，把它复制一层下来，放到合适的位置，上一半和图片重叠，另一部分自然显示就好了，
做完这步以后，下面的文字我就不再说了，同样是用上述的字符面板进行调整就OK了，我们直接讲下面放图的这个版块，
如果上面的这些操作你都明白的话，我想到这里的时候就一定不是问题了，因为这些方法我们都有用过，先用选区工具建四个黑色的矩形框，
这四个模块是相同大小和间距的，当然你可以根据你的需求进行设计，
然后再在黑色矩形框上做四个白色框，要比这四个黑色框小一些
然后我们在白色框里面放入图片就好了，那下图里面的彩色条和文字我想我不用再多讲了，上面我们都有讲到过这些工具的应用
最下面的这个模块我想我也不用再过多的讲了，只要大家会用了上面的工具，自己想一些创意就可以做的更好的，
到现在你做的怎么样了，呵，我知道现在大家一定会看累了，因为这个贴子的确好长，事实上这是我从昨天凌晨1点多开始写，写到凌晨5点多实在坚持不住了，中午又开始写写到现在的，现在北京时间17:38，呵呵终于完成了，能和大家一起分享这些，感觉很开心，好好学习，天天向上哦，一会儿吃完饭要去经验居跟前辈们学习一会儿了，大家加油哦，你们很棒，如果你有更好的创意，要记得和大家一起分享哦。
