设计一个网站Photoshop

Abraham Chaffin


	[Designing a Website in Photoshop] 教程 : Adobe Photoshop 教程设计一个网站Photoshop

字母a Photoshop网站设计教程

设计一个网站Photoshop

这个Adobe Photoshop教程将展示和讨论如何使用Photoshop设计一个网站，将出口作为 html 和形象片. 这可以在以后带入一个 html 编辑器程序，如Adobe Dreamweaver. 这是一个Adobe Photoshop网页设计教程显示了如何创建一个完整的网页中直接Photoshop.

亚伯拉罕查芬
Creativecow.net,
坎布里亚, 美国加利福尼亚州

© 2008 Creativecow.net. 保留所有权利.

创造一个标题图形
设计一个网站布局Photoshop
切片图像Photoshop为Web
出口/节能Photoshop片为网页

有许多不同的方式来处理的设计网站. 一些选择设计整个事情的Dreamweaver, 或作出速写在纸面上，然后建立自己的网站, 而另一些喜欢的图形化设计方法和使用Photoshop作为设计工具. 创建您的网站作为一个Photoshop文件首次提出建立您的网站后更容易因各种原因.

开始任何设计概念是让一个很好的启示的东西，你已经可以看到. 如画家获得灵感来自他们周围的世界, 网页设计师也将获得灵感来自他们所看到的. 有时这是一个现有的网站, 网站模板, 或从图片, 图形, 或标识.

此外，一个良好的启示是认识您的目标受众和设计，他们的满意. 布局和风格应在一些符合你的观众已经使用. 屏幕分辨率还必须考虑到在设计网站. 宽度的网页，并首次倍的网页是很重要的成功，您的网站. （褶皱是该地区之前，您的观众认为他们必须向下滚动页面.），而只能容纳较大的屏幕分辨率可能会使您的工作更轻松你是削减了部分广告受众. 大多数网络用户使用较大的屏幕分辨率比以往任何时候都和未来的网站建设的小屏幕分辨率将变得不那么重要的因素，但现在它仍然必须被视为.

它也可以为您的网站有一个灵活的宽度，以便它的扩展和合同为基础的用户窗口大小, 这是最佳时，试图建立一个网站，将可容纳每一个人. 网站设计以适应窗口大小至少是750像素宽最优. 最低决议所使用的大多数人今天是800 × 600.

步骤建立您的网站使用Photoshop是:

1. 使用Photoshop设计的外观和布局的网站您想.

2. 切片中的形象Photoshop, 出口切片图像或作为 html. 理解 html 格式有很大帮助解释如何切片图片进入 html.

3. 创建 html 模板匹配Photoshop网站设计和降低切片图像或使用Dreamweaver调整 html 档案Photoshop创建从您的 PSD 片.

网站的设计在本教程将建立一个形象贝茜在她的牧场. 这应该是一个快乐的网站=邻

创造一个标题图形

第一部分的设计网站Photoshop建立了一个头图形为您的网站. 标题图片是主要的图形的一部分，您的网站，将被视为第一，将中心的整体外观和风格，您的网站. 获得成品标题图形这里.

后续步骤:

1. 右按此处保存图像. 保存图片在一个新文件夹.

2. 打开下载的文件中Photoshop.

3. 图片剪裁到745 × 320的奶牛标志右侧的形象. 这样做选择矩形选框工具（米）, 然后根据下拉式选择固定大小. 实施745像素的宽度和320像素的高度. 您的位置选取框创建您的标题和作物的形象（图像“菜单作物）.

4. 创建一个10像素的小羽毛顶部的形象. 选择渐变工具（ g ）项, 点击梯度顶端梯度工具窗口, 设置开始和结束颜色为白色, 设置开始混浊为0 ％和结束不透明至100 ％. 使一个新的层，拖动并创建的坡道顶端控股转变，使连续的坡道.

5. 减轻图形创造另一个坡道形象的同时开始在底部和减轻走向顶端（按住SHIFT保持坡道直）. 终点坡道应约300像素以上的图片，使一个不错的图形霾. 这使外观更加美好的一天，牛农场.

6. 最后我们要减轻页眉图形，进一步创造另一个垂直坡道在相反方向的前一个. 起点应该即使上方的奶牛标识和底部应高于1像素底部的图形.

7. 标题图片保存到一个文件夹在你要建立自己的网站使用保存为Web （按ALT + SHIFT +向按CTRL +一个S ）. 另存为JPG格式, 优化, 在大约70个质量.

您的标题图形现已成立. 图形可用于不同的方式在一个网站模板. 使用它在它的规模和总结的导航和它周围正文, 或减少的规模和设置成一个更现代的设计模板布局.

设计一个网站布局Photoshop

设计您的网站应至少有三个不同的部分，其中包括的具体内容:

1. 标题
公司的徽标
图形旗帜
链接/按钮的主页, 大约, 和联系信息页
2. 身体
内容领域网页上的文字
图片或图形的内容纳入
3. 页脚
版权信息
链接政策/使用条款, 和回到顶部链接

当创建的布局设计Photoshop一定要留有余地额外导航, 文字, 和网站扩大在未来或您可能会发现自己需要完全重新设计您的网站，因为你没有离开房间，链接到更多的网页在您的设计. 以下步骤用于创建布局的Photoshop网站的布局，可从这里下载.

后续步骤:

1. 创建一个新的 PSD 文件745像素× 600像素并保存为布局.psd

2. 标题图形放置到文件. （开放的头文件（ g_header.JPG格式）, 选择它（按CTRL +一）, 复制（ Ctrl + C ）, 启动布局.PSD 窗口, 粘贴到（ Ctrl + V ）.)

3. 使用移动工具（五）推动标题顶端举行的布局转变让它提前到位顶部.

4. 打开公司的徽标, 复制并粘贴到您的布局.

5. 变换的标志（按CTRL + T ）和移动到左上角的网站布局.

6. 使用横向型工具（吨）建立一些小型文本链接在天空中两国之间最重要的标志指南. 输入文字“家”, 4位, “接触”, 另外4位, 然后“关于”. 案文应约12角, 字体字体, 使用颜色＃ a6ff94的一个有趣的浅绿色的颜色.

7. 让文字dropshadow （层“图层样式” dropshadow ）的距离为2和3的大小.

8. 位置文本使用移动工具和箭头键旁边适当左上角标识.

9. 以下的小母牛的标志，我们将创建一些较大导航/图片链接:

使用横向型工具（吨）型“主页1页第2页第3页第4 ”使用字体, 17角，黑色的文字字体. 把约4个或5个字之间的空格，使按钮一些空间.

创建一个新层其拖动下面的文字您刚刚创建

与矩形选框工具（米）选择一个地区就在更大的导航.

选择油漆桶工具（ g ）和填写所选领域的新的空层（＃ a6ff94 ）绿色.

使这一层看起来像一个按钮的去层菜单 “图层样式”斜面和浮雕. 使用默认设置，按确定

使用单选框工具栏删除列的像素中每个单词之间的牢固绿色背景层您刚刚创建. 这将打破锥，使每个字看起来像一个单独的按钮. 您可能需要放大，以获得正确的字之间.

8. 重复层的绿色按钮拖曳到新图层按钮或去层菜单 “重复层.

9. 选择绿色按钮层底部添加一个运动模糊的层距离大约150像素的去筛选菜单 “模糊” Motion模糊.

10. 移动模糊层下跌了约10像素，并降低不透明度为20 ％. 这给了微妙的线在你的按钮，以帮助鸿沟顶端的内容.

11. 底部的布局创造文字，说版权所有Creativecow.net 2008年.

12. 创建一个新层后面的版权文字，将成为背景页脚文本, 确保层选定.

13. 使用矩形选框工具（男），选择一个地区在页面的底部，只是略高于版权文字.

14. 使用油漆桶工具（ g ）和填补该地区的鲜绿色（＃ a6ff94 ）.

15. 羽毛外部边缘采用内发光图层样式（层菜单 “图层样式”内辉光）设置混合模式为正常, 颜色为白色（＃ ffffff ）和大小为10像素.

我们现在设计了一个简单的, 娱乐, 网站Photoshop一个页眉和页脚. 白色的空间之间的页眉和页脚将所有的文字内容和图片，将填补在实际网站.

切片图像Photoshop为Web

现在，我们已经设计了一个简单的网站Photoshop我们将它变成一片片的碎片和出口作为 html 文件，可以使用和修改后的Dreamweaver. 切片时，请记住您的网站设计，每个片将成为一个新的细胞表和图片，以便尽量少切片和尽可能简单. 确定和开始和结束您的片以外的设计，以便在可能的Photoshop没有错单像素您可能会错过一个切片. 打开网站设计我们早些时候所作, 选择切片工具（ k ）和让我们开始吧. （打开抢购为了取得更好的结果-查看“菜单单元（按Ctrl + Shift + ; ）, 确保快速层是打开的.）下载切片 PSD 文件浏览.

后续步骤: