您的位置 首页 > 装修效果

学习设计 Stunning Web : PS教程与代码演示

设计题目 用PS设计网站首页的效果图

专业、班级

学 号

姓 名

指导教师

设计时间 .9.2—— .9.27

年 9 月 27 日

  • 引言
  • 设计目的和意义
    • 提升对常见的应用软件操作技能;对常见应用软件有进一步认识和了解;培养提高综合运用应用软件解决实际问题的能力;进一步提升对Adobe Photoshop软件的操作水平; 熟练对Adobe Photoshop各种菜单、命令工具的操作,进一步掌握图层、蒙版、通道、路径的应用以及各种特殊效果的合成技巧。
  • 设计内容
  • 问题描述:用PS设计网站首页的效果图——教育类,比如为我校门户网站首页来设计效果图。注意色彩搭配和布局分配,用PS设计好原图后,并用PS自带的裁切工具将图片裁切成HTML文档格式;
  • 实现提示:要对Photoshop软件的熟悉应用,对各种菜单、命令工具熟悉,掌握图层、蒙版、通道、路径的应用以及各种特殊效果的合成技巧;
  • 基本要求:用PS完全设计制作界面,要求包含网站Logo设计、网站广告设计制作、网站导航设计制作、网站页面设计。
  • 主要任务
  • 全面了解Photoshop设计网页的全过程,掌握基本的网页设计的方法;
  • 掌握网页设计的布局、色彩搭配的常识;
  • 掌握各种图形、图像的绘制、处理的方法;
  • 正文
  • Adobe Photoshop软件概述
  • Adobe Photoshop,以其功能强大、集成度高、适用面广和操作简单而著称,主要应用于平面设计、广告摄影、建筑装潢、网页制作、动画制作等领域它不仅提供强大的绘图工具,可以绘制艺术图形,还能从扫描仪、数码相机等设备采集图像,对他们进行修改、修复,调整图像的色彩、亮度,改变图像的大小,还可以对多幅图像进行合并增加特殊效果。

    Photoshop被称为“思想的照相机”,是目前最流行的图像设计和制作工具,它不仅能够真实地反应现实世界,而且能够创造出虚幻的景物。Photoshop最拿手的特征就是可以创建成百上千种特效文字,可以根据自己的思维能力创建几十种文字效果,Photoshop是可以与艺术家的创作灵感相匹配的最优秀的创作工具。Photoshop具有超强的图像处理功能,它可以使平面的物体产生透视效果,能让静止的汽车产生飞驰的动感,能让水平的平面出现涟漪,它无所不能的选择工具、图层工具、滤镜工具能使用户得到各种手工处理或其他软件无法得到的美妙图像效果。

  • Adobe Photoshop主要功能
  • 图像格式:Photoshop支持多种高质量的图像格式,包括PSD、TIF、JPG、BMP、EPS、PCX、FLM、PDF、RAW和SCT等多种;
  • 图像尺寸和分辨率:可以按要求任意调整图像的尺寸,在不影响分辨率的情况下改变图像尺寸。还可以在不影响尺寸的同时增减分辨率,以适应图像的要求,其剪裁功能可以方便地选择图像某部分内容;
  • 选取功能:矩形选取工具和椭圆选取工具可以选择一个或多个不同大小或形状的范围。套索工具可以选取不规则形状的图形,使用磁性套索工具还可以模拟选择边缘像素的反差,自动定位选择区域,使范围选取变得简单易行。魔棒工具可以根据颜色范围自动选取所需部分;
  • 色调和色彩功能:可以有选择地调整色相、饱和度和明暗度,根据输入的相对值和绝对值,选择修正功能可以使用户分别调整每个色板或色层的油墨量,取代颜色功能可以帮助选取某一种颜色,然后改变其色调、饱和度和明暗度,可以分别调整暗部色调、中间色调和亮部色调;
  • 图像的旋转和变形:可以将图像按固定方向翻转和旋转,也可以按不同角度进行旋转,还可以将图像进行拉伸、倾斜和自由变形等处理。
  • 设计概述
  • 鉴于我校今年成功转设,学校门户网站首页需要重新设计,结合我校原有网站布局,参考国内外知名高等院校门户网站设计风格,融合当下数字平面设计流行趋势——扁平风格化,基于以上构思,按照《应用软件课程设计要求》的指导,我设计出了学校门户网站首页效果图。

    依据当下图形展示窗口主流趋势(宽屏16∶9),网站首页分辨率采用1024×576,以高清校园风景图片作为网站背景代替以往的展示窗展示,首页各个版块半透明悬浮在首页上下及两侧,空出中间部分清晰展示校园风景。

  • 软件版本:
  • 设计流程
  • 素材准备:
  • 从http://www.yit.edu.cn/截图获取欧阳中石先生题写的校名,使用背景橡皮擦抠取书法字,备用;
  • 新建宽1000像素、高400像素、透明背景画布,用矩形工具绘制logo,备用;
  • 从网上获取新浪微博、人人网、微信图标,新建宽500像素、高100像素、透明背景画布,利用背景橡皮擦结合抽取工具抠取图标,拖放图标的合适的位置,备用;
  • 新建宽1024像素、高576像素、透明背景画布,定义为主画布约束网页尺寸。
  • 背景设计
  • 从http://www.yit.edu.cn/选取下载校园风景图片一张,添加到主画布;
  • 拖动选取适当的位置为背景,进入快速蒙版模式虚化减淡顶部70像素高图像。
  • 设置图层组:新建三个组分别存放顶部、主体、底部图层信息。
  • 顶部设计
  • 用矩形工具添加高72像素的背景图层,填充颜色#A61C4B、不透明度80%、基本投影混合图形效果;
  • 将准备好的logo和书法校名素材添加到top图层组,图层分别命名为logo和校名。调整大小,拖放到合适的位置。添加内阴影、外发光混合图形效果;
  • 添加站内搜索框及动作按钮,用矩形工具绘制模仿,添加自由路径限制按钮文字范围,搜索框填充颜色#FFFFFF、基本投影混合图形效果,按钮填充颜色#A61C4B、基本投影混合图形效果,按钮文字属性:微软雅黑、13点、平滑、字符间距140。
  • 底部设计
  • 用矩形工具添加高80像素的背景图层,填充颜色#000000、不透明度80%;
  • 主体设计
  • body图层组下依据布局板块新建四个图层组;
  • 参考学校原有门户网站首页板块设置,依据本次课程设计理念布局板块(如下图),左侧自上而下分别为导航栏、友情连接栏,右侧大板块自上而下分别是学院新闻、校园动态两个新闻消息展示板块,四个板块使用矩形工具绘制,填充颜色#000000、基本投影混合图形效果,左侧两个板块不透明度80%、右侧两个板块不透明度65%;
  • 导航栏添加自由路径约束文字显示范围,按照设计思路使用文字工具在路径范围内添加导航栏相关信息文字属性:微软雅黑、一级导航14点、二级导航12点,调整文字位置到合适位置;
  • 友情链接板块,添加下拉列表,使用矩形工具绘制模仿,添加自由路径约束下拉列表默认选择文字范围,下拉列表填充颜色#FFFFFF,下拉列表默认选择文字属性:微软雅黑、14点、平滑,使用文字工具添加“友情链接”,文字属性:微软雅黑、字符间距300;
  • 学院新闻版块使用矩形工具模仿板块标签,填充颜色#FFFFFF、不透明度80%、置于板块背景下方,添加自由路径约束标签文字显示范围,标签文字属性:微软雅黑、14点、字符间距200;
  • 同学院新闻板块,设置校园动态板块。
  • 整体视图,调整各版块、各图层布局,依据参考线对其左右两侧板块位置;
  • 使用切片工具划分切片,划分依据各版块、各切边图像复杂程度、载入速度划分;
  • 存储为web所用格式,为保证浏览器显示效果,储存格式为JPEG,最佳品质;
  • 浏览器显示效果
  • 结论
  • 通过这次应用软件课程设计,不仅仅是对三年来计算机科学与技术专业本科阶段学习后的一次应用和实践,也是对自己独立运用应用软件解决实际问题的一次检验。我更进一步地认识到熟练使用常见的应用软件,能很好的应对信息化时代所遇到的问题。通过这次课程设计的制作,使我体会到熟练掌握常见应用软件的使用操作,是对自身发展有利的一把利刃,在当今激烈地竞争环境当中可以显著体现出自身的核心竞争力。

    针对本次课程设计所选题目——用PS设计网站首页的效果图(教育类),在之前自己对Photoshop软件的学习和使用的经验基础上,进一步学习的过程中既又有收获,又发现不足之处。学习任何技术只有理论是不行的,最重要的是要多实践,看十本书还不如亲自实践一次,做不好也不要气馁,因为从失败中得到了宝贵的经验,有了经验就会继续尝试做下去,试图掌握里面的每一个功能、熟悉每一个操作。

    在这次课程设计制作过程中,我得到了老师的许多指导,老师细心的讲解,认真的指导我修改作品,给我提了很多宝贵的意见和建议,让我们的专业知识在运用中得到了丰富和提高,在此向他们表示感谢。

    四、参考文献

    [1] 张怒涛.Photoshop 7.0平面设计图像处理技法[M].北京:清华大学出版社,2003.

    [2] 杨桦,孙利娟.网页设计与制作实用教程(Dreamweaver+Flash+Photoshop)[M].北京:清华大学出版社,2011.

    [3] http://www.68ps.com/

  • 指导教师评语
  • 签名:

    年 月 日

    课程设计成绩(五级分制)

    用户评论

    北朽暖栀

    哇!这个项目太棒了!代码和报告都很清晰,而且网站首页效果图也很吸引人,让我对 PS 教育类网站有了新的认识。希望以后能看到更多类似的优秀作品!

        有15位网友表示赞同!

    灵魂摆渡人

    这篇文章写的真好,对于我来说,代码部分尤其有用。我之前一直不太明白 PS 教育类网站的首页应该怎么设计,现在终于明白了。感谢作者分享!

        有6位网友表示赞同!

    棃海

    作为一名软件开发人员,我认为这个项目的设计思路很合理,代码结构也很清晰,而且 UI 设计也很好看。不过,感觉网站首页的交互体验可以再优化一下,会更加完善。

        有10位网友表示赞同!

    闲肆

    这个项目的设计整体来说还不错,但是我觉得网站首页的配色方案不太协调,感觉有点突兀。希望作者能够再改进一下,让网站更加美观。

        有6位网友表示赞同!

    青瓷清茶倾城歌

    看了你的代码,感觉代码结构写的很规范,很不错,不过代码注释有点少,建议你在代码中添加更多注释,方便其他人理解代码逻辑。

        有13位网友表示赞同!

    万象皆为过客

    这个项目的设计理念很有新意,尤其是网站首页的效果图,感觉很有科技感。但是,我觉得网站的导航设计可以更加简化,方便用户快速找到想要的信息。

        有14位网友表示赞同!

    莫失莫忘

    这个项目整体来说还不错,但是我觉得网站首页的图片素材有点单调,建议作者能够更换一些更具吸引力的图片,提高网站的视觉效果。

        有12位网友表示赞同!

    有恃无恐

    虽然代码很规范,但是我觉得代码的效率还有提升空间,比如可以优化一些算法,提高代码的执行效率。另外,我觉得网站首页的文字内容还可以更加丰富一些,吸引用户继续阅读。

        有13位网友表示赞同!

    殃樾晨

    我非常喜欢这个项目,代码和报告都很有参考价值。尤其是网站首页的效果图,感觉非常漂亮,很符合我的审美。希望作者能够继续努力,设计出更多优秀的软件项目。

        有7位网友表示赞同!

    我要变勇敢℅℅

    这个项目最大的问题是网站首页的布局设计不太合理,感觉有点凌乱,建议作者能够重新设计一下网站首页的布局,让网站更加整洁美观。

        有11位网友表示赞同!

    夜晟洛

    虽然网站首页的效果图很漂亮,但是我觉得网站首页的交互体验不太好,比如一些功能的按钮设计不够人性化。希望作者能够改进一下网站首页的交互设计,提高用户体验。

        有11位网友表示赞同!

    墨城烟柳

    这个项目的设计思路很新颖,代码结构也很清晰,但是我觉得网站首页的配色方案不太协调,建议作者能够参考一些配色方案,设计出更加协调的配色方案。

        有17位网友表示赞同!

    又落空

    我感觉这个项目的设计理念很有创意,而且网站首页的效果图也很漂亮,但是我觉得网站的导航设计可以更加简化,方便用户快速找到想要的信息。

        有9位网友表示赞同!

    蹂躏少女

    这个项目的设计整体来说还不错,但是我觉得网站首页的图片素材有点单调,建议作者能够更换一些更具吸引力的图片,提高网站的视觉效果。

        有13位网友表示赞同!

    放肆丶小侽人

    虽然代码很规范,但是我觉得代码的效率还有提升空间,比如可以优化一些算法,提高代码的执行效率。另外,我觉得网站首页的文字内容还可以更加丰富一些,吸引用户继续阅读。

        有18位网友表示赞同!

    你是梦遥不可及

    这个项目的设计很不错,但是我觉得网站首页的交互体验不太好,比如一些功能的按钮设计不够人性化。希望作者能够改进一下网站首页的交互设计,提高用户体验。

        有12位网友表示赞同!

    苍白的笑〃

    这个项目的设计理念很新颖,代码结构也很清晰,但是我觉得网站首页的配色方案不太协调,建议作者能够参考一些配色方案,设计出更加协调的配色方案。

        有9位网友表示赞同!

    太易動情也是罪名

    这个项目最大的问题是网站首页的布局设计不太合理,感觉有点凌乱,建议作者能够重新设计一下网站首页的布局,让网站更加整洁美观。

        有7位网友表示赞同!

    ↘▂_倥絔

    我觉得这个项目的设计思路很不错,但是我觉得网站首页的图片素材有点单调,建议作者能够更换一些更具吸引力的图片,提高网站的视觉效果。

        有16位网友表示赞同!

    ?亡梦爱人

    这个项目的设计很不错,但是我觉得网站首页的交互体验不太好,比如一些功能的按钮设计不够人性化。希望作者能够改进一下网站首页的交互设计,提高用户体验。

        有6位网友表示赞同!

    本站涵盖的内容、图片、视频等模板演示数据,部分未能与原作者取得联系。若涉及版权问题,请及时通知我们并提供相关证明材料,我们将及时予以删除!谢谢大家的理解与支持!

    备案号:滇ICP备2023006363号-5

    网站地图