photoshop制作网站流程图解

说点题外话,这篇教程是网络上找的,为了找到他的图,我起码找了10个以上网站,这十多个网站转载别人的文章图片全是用的盗链,源头的网站把图片地址改了,导致这十多个网站都无法显示图片了,无语....盗链已经如此之严重了.还好有的站把图片上传到自己空间了,总算找齐了这些图片。教程作者已经无从考究了,如果你知道请联系我.
图片附件: [1] 104142_550699506_mNEJG.jpg (2006-11-7 11:04, 26.54 K)

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='点击在新窗口查看全图\nCTRL+鼠标滚轮放大或缩小';}" border=0>
1.规划:不管是乔客,还是用动易、风讯,我们都应该考虑两个问题:
a、版面要分出头、中、底三个部分。
b、中间部分要考虑两种情况,一是两栏(乔客左窄右宽,动易左宽右窄),二是一栏,两种情况显示不能变形。有些朋友想每个板块的头部不一样,这也是可以的,你可以在程序代码中做文章,那是编程的问题,按下不表。
如果我看到别人的版面想拿下来,那就做个截图,建立一个photoshop文件,把截图放在最底层,作为最初的草图。
2、制作。
a、即使不用别人的版面,最好也还是找一个同类系统的网站截一个图,放在最底层。拉三根垂直辅助线:左边线,中间虚线位置,右边线。
b、建立头、中、底三个图层组。有些人用photoshop不喜欢建立图层组,这不是好习惯,一个版面,少则几十层,多则上百层,不分开图层组管理就很乱,影响工作效率,更影响多人合作。
图片附件: [2] 102038_243110116_LMRfd.jpg (2006-11-7 11:10, 11.47 K)

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='点击在新窗口查看全图\nCTRL+鼠标滚轮放大或缩小';}" border=0>
c、制作的时候最好尽量把文字内容也放上去,可以更接近实际效果,等切图的时候隐藏这些图层。
d、标题样式。一个版面除了头、底要特别制作外,中间部分应该考虑制作三种标题样式:左栏、右栏、通栏,也可以统一风格。还要考虑表头背景、一些常用到的边框等。我自己把许多喜欢的边框样式用js作了一个样式包,随时调用,而标题样式我是使用flash来做的一个样式,使用不同的参数调用,就可以有不同的样式和颜色,改版的时候就改一个js文件和flash文件,做版面的时候会节省一些时间。
图片附件: [3] 3.jpg (2006-11-7 11:11, 46.05 K)

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='点击在新窗口查看全图\nCTRL+鼠标滚轮放大或缩小';}" border=0 resized="true">

e、常用的按钮样式。常用的按钮其实不用在版面制作的时候做的,可以找回原来的按钮图片一个一个修改。
f、特殊字体的使用。不管是链接还是内容,我都主张尽量使用样式表来控制字体样式,但有些地方要用到不常用的字体,为了使所有的浏览者都能看到自己的设计原意,就要把文字制作成图片,这一类的图片要适当使用,因为使用了图片,对搜索引擎的访问是无益的。
图片附件: [4] 4.jpg (2006-11-7 11:12, 35.84 K)

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='点击在新窗口查看全图\nCTRL+鼠标滚轮放大或缩小';}" border=0>
g、像素图。尽量使用像素处理,例如一些边框、小图标,会使图片的字节数大大减少,显示快,容易透明处理。
图片附件: [5] 5.jpg (2006-11-7 11:12, 8.34 K)

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='点击在新窗口查看全图\nCTRL+鼠标滚轮放大或缩小';}" border=0>

3、切图切图要在imageready中完成,先要把完稿的作品保存,最好还要做一个备份,然后跳转到imageready工作。
a、有朋友切图时要合并图层,这是没有必要的,图层合并了,以后修改和编辑都麻烦,而且有时候切图还要按一些图层的大小定位来做,例如要切出一个468x60的广告横标,你可以把这个横标的图层载入选定区域(load selection),然后从菜单select把选定区域转换成切片(create slices from selection)。
b、不要把整个版面同时切图。一般来说,头部的色彩很丰富,而中间和底部的色彩比较少。例如一个版面头部的切片,调色板可能要256种颜色,而中间和底部只要18色就能搞定,如果同时切片,就变成同一个调色板,中间的部分也使用了256色,就会使文件大小增加,但如果折中,让头部256色减少为128色或32色,又会影响效果。所以要分别处理,方法是在ps中分别选择头部、中间(中间有时候还可以分出几个板块)、底部,裁切,另存为几个不同文件,然后切图。
c、切图要考虑清楚,你准备使?
来定位还是使用
定位,不同的html图片分割是不同的。例如新阳江网站的两边灰色框,如果使用
来做,背景图只要切一个高1像素宽791像素的背景图,而如果使用
,就要切出左边背景和右边背景。
图片附件: [6] 6.jpg (2006-11-7 11:14, 22.31 K)

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='点击在新窗口查看全图\nCTRL+鼠标滚轮放大或缩小';}" border=0>

d、gif和jpg。在同一个文件中切图,photoshop是允许不同的切片使用不同的文件格式的,但gif格式和jpg格式结合的地方,有时候肉眼都能可能看出颜色的差别,所以同一部分的切图最好使用同样的格式。颜色较少、较单纯的图片,文字图片,从矢量图转过来的小图标、边框背景等图片,一般用gif格式比较好,文件小,颜色不失真。摄影图片、三维软件做出来的彩色立体文字,一般用jpg格式。如果切片是准备做flash用的,文字部分和矢量图标等就不用了,在flash中使用字体和矢量图比做成位图占用的字节小,动画效果更流畅。e、有链接的图片。有链接的图片处理方法很多,你可以每个链接切一个图片,也可以切一个大图,在网页编辑器里面编辑的时候添加链接热区。现在更好的做法是使用文本链接,把图片变成背景就行了。
图片附件: [7] 7.jpg (2006-11-7 11:14, 27.34 K)

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='点击在新窗口查看全图\nCTRL+鼠标滚轮放大或缩小';}" border=0>

图片链接还可以用flash来做,可以有很酷的动态效果,切一个大图,倒入flash文件中作为背景层,上面添加透明按钮就可以了。要注意的是flash里面的图片,可能会与页面其他图片的色调有些差异,位置也有一个像素的位移,一定要小心处理。
图片附件: [8] 8.jpg (2006-11-7 11:15, 35.93 K)

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='点击在新窗口查看全图\nCTRL+鼠标滚轮放大或缩小';}" border=0>

使用了图片或flash作链接,对搜索引擎支持都不大好,作为补救措施,你可以在页面其他内容使用一些文本链接引导搜索引擎找到这些页面。

教程作者已经无从考究了,如果你知道请联系我.
小虫设计,俺的主页 就是这样制作的!

(0)

相关推荐

  • oracle sql执行过程(流程图)

    Oracle sql执行流程图_SQL执行过程一.sql语句的执行步骤:1)语法分析,分析语句的语法是否符合规范,衡量语句中各表达式的意义.2) 语义分析,检查语句中涉及的所有数据库对象是否存在,且用户有相应的权限.3)视图转换,将涉及视图的查询语句转换为相应的对基表查询语句.4)表达式转换, 将复杂的 SQL 表达式转换为较简单的等效连接表达式.5)选择优化器,不同的优化器一般产生不同的"执行计划"  6)选择连接方式,ORACLE有三种连接方式,对多表连接ORACLE可选择适当的连

  • activiti获取流程图实例

    本文实例讲述了activiti获取流程图的方法,具体操作步骤如下: 1.发布流程代码如下: repositoryService.createDeployment() .name("expense-process.bar") .addClasspathResource("org/activiti/expenseProcess.bpmn20.xml") .addClasspathResource("org/activiti/expenseProcess.png

  • 详解js中构造流程图的核心技术JsPlumb

    项目里面用到了Web里面的拖拽流程图的技术JsPlumb,其实真不算难,不过项目里面用HTML做的一些类似flash的效果,感觉还不错,在此分享下. 一.效果图展示 1.从左边拖动元素到中间区域,然后连线 2.连线类型可以自定义:这里定义为直线.折线.曲线.实际项目中根据业务我们定义为分装线.分装支线.总装线等 3.鼠标拖动区域选中元素,并且选中元素统一拖动位置. 4.对选中的元素左对齐. 5.对选中元素居中对齐 6.右对齐 7.上对齐 8.垂直居中对齐 9.下对齐 10.根据第一个选中的元素上

  • 详解js中构造流程图的核心技术JsPlumb(2)

    前言:上篇详解js中构造流程图的核心技术JsPlumb介绍了下JsPlumb在浏览器里面画流程图的效果展示,以及简单的JsPlumb代码示例.这篇还是接着来看看各个效果的代码说明. 一.设置连线的样式和颜色效果代码示例 大概的效果如图: 这些效果看着很简单,那么,我们如何用代码去实现它呢.上章我们说过,JsPlumb的连线样式是由点的某些属性决定的,既然如此,我们就通过设置点的样式来动态改变连线的样式即可.来看代码: 首先来看看连线类型的那个select <div id="btn_line

  • Activiti流程图查看实例

    本文实例展示了Activiti流程图查看的实现方法,具体步骤如下所示: 1.测试用例查看图片代码如下: public void viewImage() throws Exception { // 创建仓库服务对对象 RepositoryService repositoryService = processEngine.getRepositoryService(); // 从仓库中找需要展示的文件 String deploymentId = "701"; List<String&g

  • C#实现流程图设计器

    最近一个偶然的机会竟然实现了一个简单的流程图设计器(虽然其功能还有很多不完善之处,但是心中还是非常高兴,满满的成就感). 话不多说,先看一下实现的主界面效果: 左边是一个ListView(listView1),右边的画布是一个Panel(panel1).下面将主要思路介绍如下: 1)允许拖放,listView1和panel1设置其AllowDrop=true; 2)非连接线类型的图形拖放处理:左边的listView1的项目被选中后,可以获取其图形类型(是路由器.是服务器还是云等),并在全局变量中

  • photoshop制作网站流程图解

    说点题外话,这篇教程是网络上找的,为了找到他的图,我起码找了10个以上网站,这十多个网站转载别人的文章图片全是用的盗链,源头的网站把图片地址改了,导致这十多个网站都无法显示图片了,无语....盗链已经如此之严重了.还好有的站把图片上传到自己空间了,总算找齐了这些图片.教程作者已经无从考究了,如果你知道请联系我. 图片附件: [1] 104142_550699506_mNEJG.jpg (2006-11-7 11:04, 26.54 K) screen.width*0.7) {this.resiz

  • Python Django搭建网站流程图解

    1. 创建Django REST framework工程 1.1手动创建工程文件夹 1.2进去工程文件夹内,执行命令:django-admin startproject web_project创建工程目录 1.3修改,添加目录结构 apps 存放Django的应用libs 存放第三方的库文件settings 存放配置文件的目录,分为开发dev和线上produtils 存放项目自己定义的公共函数或类等docs 用于存放一些说明文档资料 2. 修改配置文件 2.1 将Django工程中的settin

  • 创建nuxt.js项目流程图解

    安装 步骤一:创建nuxt.js项目 步骤二:确定项目名.描述.作者,直接回车 步骤三:确定包管理工具 步骤四:选择UI框架 步骤五:选择前端服务器框架 步骤六:选择模块 步骤七:选择格式化工具 步骤八:选择测试框架 步骤九:选择渲染模式 ==SSR,服务器端渲染,需要nuxt.js需要知道,并需要练习的[推荐]== SPA,之前学的单页,本课程不练习. 步骤十:选择发布工具 步骤十一:安装成功 完整信息 安装成功截图 运行 以上就是创建nuxt.js项目流程图解的详细内容,更多关于创建nuxt

  • python 制作网站筛选工具(附源码)

    一.思路 1.整体思路 2.代码思路 思路很简单,就是用python发送请求,提取响应体中的状态码加以判断,最后保存到本地txt文本中,以实现网站信息的筛选. 二.撰写代码 import time import requests import urllib3 from concurrent.futures import ThreadPoolExecutor #取源文件中的网址并且去重 def get_url(old_file): with open(old_file,'r',encoding='

  • python 制作网站小说下载器

    基本开发环境 · Python 3.6 · Pycharm 相关模块使用 目标网页分析 输入想看的小说内容,点击搜索 这里会返回很多结果,我只选择第一个 网页数据是静态数据,但是要搜索,是post请求,需要提价data参数,如下图所示: 然后通过解析网站数据,获取第一个小说i的详情页url即可 静态网页的获取,难度是不大的. def search():     search_url = 'http://www.xbiquge.la/modules/article/waps.php'     da

  • C#制作网站挂机程序的实现示例

    目录 前言 一.程序界面(如下图) 二.使用说明 1.界面说明 2.使用注意点 三.程序开发过程 1.测试网页 四.程序开发的一些其它思路及问题 1.采用通过已知进程获取主窗口句柄再遍历子窗口句柄 2.网上搜索C#操作API函数的东西很少,且不完整 3.如果想查看Windows下的API函数,还可以使用工具: 4.获取应用程序窗体的句柄.标题.类型的工具软件 写在最后 前言 真实的想法是用C#GUI开发一个自动化测试的软件,能帮助我完成500台计算机在线网络答题的压力测试.既要能自动鼠标定位单击

  • Linux RabbitMQ 集群搭建流程图解

    1.整体步骤 最开始我们介绍了如何安装及运行 RabbitMQ 服务,不过这些是单机版的,无法满足目前真实应用的要求.如果 RabbitMQ 服务器遇到内存崩溃.机器掉电或者主板故障等情况,该怎么办?单台 RabbitMQ服务器可以满足每秒 1000 条消息的吞吐量,那么如果应用需要 RabbitMQ 服务满足每秒 10 万条消息的吞吐量呢?购买昂贵的服务器来增强单机 RabbitMQ 务的性能显得捉襟见肘,搭建一个 RabbitMQ 集群才是解决实际问题的关键. 首先,我们需要3台Linux操

  • js制作网站首页图片轮播特效代码

    本文实例为大家分享了使用js制作一般网站首页图片轮播效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> .warp{ width: 600px; height: 750px; position: relative;

  • 用photoshop制作逼真的蒲公英步骤第1/2页

    先看一下最终效果: 制作工具:Photoshop CS 制作过程: 1.新建一个文件.单击图层面板中"创建新图层"按钮,新建图层1并填充黑色. 2.单击工具箱中的"钢笔工具",在窗口中绘制一条路径,按住Ctrl键的同时单击空白处,再继续绘制路径,图像效果如图01所示. 3.新建一层,并重命名为画笔1,单击工具箱中的画笔工具,在属性栏中设置画笔为"尖角5像素",主直径为3.设置前景色为白色,单击路径面板,选择刚绘制的路径,右击,在弹出的快捷菜单中选

  • SSO单点登录系统实现原理及流程图解

    一.准备 1.了解http请求及特点 2.了解cookie和session 3.了解用户登录和注销流程 二.单机用户登录流程 总体流程图实现: 1.http无状态协议 web应用采用browser/server架构,http作为通信协议.http是无状态协议,浏览器的每一次请求,服务器会独立处理,不与之前或之后的请求产生关联,这个过程用下图说明,三次请求/响应对之间没有任何联系 但这也同时意味着,任何用户都能通过浏览器访问服务器资源,如果想保护服务器的某些资源,必须限制浏览器请求:要限制浏览器请

随机推荐