平面设计培训平面设计培训 平面设计培训班 平面设计培训课程
平面设计培训

注重实战经验传授,打造平面设计精英

Focus on actual combat experience

 

1.  十多年教学经验,由平面设计行业专家授课

2.  平面设计采用WORKSHOP授课方式,更好吸收教学内容

3.  有问题可以随时提出,不积压问题,及时解决问题

4.  平面设计培训学习期满后可推荐就业

5.  在工作中遇到遇到技术或者设计上的问题给予免费指导

6.  平面设计培训课程可在五年内免费重修

 

了解更多 >>

平面设计培训精品设计课程推荐 / Recommend design courses

网页制作中的网页设计切割效果图 本文章摘自www.boaoit.com 天津室内设计培训

 

天津博奥教育培训为学生提供最专业的网页设计培训,今天就从建站的流程为学员讲解div+css布局标准教程:

建立站点

结构分析

搭建框架

切割效果图

布局页面——头部和导航

布局页面——侧边栏

布局页面——主体部分

底部和细节调整

相对路径和相对于根目录路径

基本框架搭建完毕后,下一步就是要分析每一块该怎么切图了。切图方法有多种,可以使用ps或fireworks自带的切片工具,也可以用QQ的截屏或者创建新文件,把需要的部分复制过来保存都可以,关键看个人喜好了。

用ps的切片工具的话,把需要切割的区域用切片工具切分,如果要设置图片的名称,请使用切片选择工具,然后在切片上双击,会弹出如下窗口,填写名字后确定即可。

切割完后,需要保存图片了,选择文件——存储为web和设备所用格式,在弹出的窗口中点击选中切片,然后在右侧可以设置当前切片的图片格式。这里有个技巧,一般小型色彩单一的图片,采用gif格式,照片类大型图片采用jpg,这样生成的图片既能保证质量,图片体积又小。

设置完图片的格式后,就可以存储了,这里选择到images的上一级目录就行了,ps会自动创建images目录并把图片文件放入,如果已存在,直接放入。在格式处选择仅限图像,如果选择html和图像,ps会自动生成一个表格式的网页,这个页面不是我们需要的,就不让它生成了;还有一个需要注意的地方就是选择所有用户切片,这样只把我们手动切割的图片保存下来,其它的就不保存了。保存后的图片如下所示,其中hot_bg.gif这张图片切割时没有隐藏上边的文字,一会儿在ps里再处理一下把文字抹掉。

目前所切的图片只是一部分,并没有把整个页面所需的图片全都切割下来,比如导航部分所用背景图片可以放到一张图片上,下面就用新建文件,然后用QQ截屏,粘贴过去的方法来创建。

分析一下上图的导航部分:1、两端的圆角;2、鼠标划过状态和当前栏目状态宽度应该随着字数的多少而改变;3、二级导航有鼠标划过时的状态。分析完之后,就需要把需要的图片整合到一张图片上了,整合的结果如下图,这个根据自己的需要进行整合。其实完全可以把其它一些小图标都整合在一张,但那样操作起来比较麻烦以我们还是归一下类,把相关的图标整合到一起。

接下来整合侧边栏的背景图片,分析发现侧边栏应用同样的样式,只不过高度有所不同,而且是四角都是圆角,所以只用一个通用的就可以满足所有侧边栏块的需求了。那么怎么制作这个通用的背景呢?从下图我们发现,标题的高度都是一样的,只不过是下边的内容高度不同而已,那么我们把下边内容的背景制作的足够长,超过可能出现的最大高度就可以满足需求了。

整合后的效果如上图,如果你现在还不明白为什么要这么做,那么一会儿写完样式表你就明白了。下面把三个 图标也给切出来,如下图:这些完事后,还有联系我们的图片和修饰小图标了。联系我们的图片如下,这里的图片和小图标要背景透明,

天津PS培训

PS设计软件培训课程学习辅导资料

为了更好的让学员进行学习PS设计软件,天津博奥教育在专注平面设计培训课程的同时也为学员提供大量的PS软件的学习辅导资料...

 

AI培训天津

AI设计软件培训课程学习辅导资料

学习平面设计中的AI软件,想知道AI有多少应用巧计,想更快的掌握AI软件,想尽快学习并掌握AI软件吗?天津博奥教育提供大量...

 

CorelDRAW培训

CorelDRAW软件培训学习辅导资料

平面设计培训课程中的CDR软件是平面设计工作中重要的软件之一,CDR软件在使用中有好多实际技巧和经验,为了正好的学习,天津博奥教育...

天津平面设计培训

ID设计软件培训课程学习辅导资料

为了更好的让学员进行学习ID设计软件,天津博奥教育在专注平面设计培训课程的同时也为学员提供大量的id软件的学习辅导资料...

 

平面设计培训课程文字设计

平面设计培训文字设计学习辅导资料

文字在平面设计中的使用及表现,在实际工作中是非常重要,同样也是平面设计培训课程中的重点,不但在课上讲解,还提供大量...

 

天津平面设计案例培训

平面设计培训综合应用案例辅导资料

不但注重单个设计软件的使用和技巧,更注重的是设计软件的综合应用,用实际设计案例把设计软件无缝衔接,课上授课下课技术指导,还提供大量...


    天津博奥教育地址:天津市南开区鞍山西道百脑汇科技大厦23楼2307室。


    培训课程咨询电话:022-58697923,022-58697932,18222233399。


    天津博奥电子邮箱:boaoit@163.com


    天津博奥教育官网:www.boaoit.com


    天津博奥教育乘车路线:45、50、609、662、678、661、829、851、867、879(卧龙里站下)
640、687、859、705、829、849、847(世通大厦站下)

360网站安全检测平台

天津室内设计培训

微信公众二维码

天津博奥教育微信公众号二维码

课程咨询二维码

平面设计培训天津
平面设计培训班天津
平面设计培训班天津