1. 怎么设置浏览器窗口的网站logo,我说的是网页前端
网站上的logo实际上是一个“favicon.ico”图片。
实现步骤:
第一步:制作favicon.ico,大小为16*16毫米;
第二步:将“favicon.ico”放到项目的根路径下。
第三步:在所有html页面head中添加如下代码。
//收藏用logo图标
<link rel="bookmark" type="image/x-icon" href="favicon.ico"/>
//网站显示页logo图标
<link rel="shortcut icon" href="favicon.ico">
第四步:直接打开html页面,打开方式为常用的浏览器即可。
2. 前端新手不懂就问
首先在背景样式中,属性是background-size:
希望可以帮到你呀,可以多交流,相互帮助!!!
3. UI设计,平面设计,网站设计有什么不同
一、UI设计、平面设计、网站设计的简单介绍:
①-UI设计的定义:
UI即User Interface(用户界面)的简称。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品位,还要让软件的操作变得舒适简单、自由,充分体现软件的定位和特点。
软件设计可分为两个部分:编码设计与UI设计。UI的本意是用户界面,是英文User和 Interface的缩写。从字面上看是用户与界面2个部分组成,但实际上还包括用户与界面之间的交互关系。
在飞速发展的电子产品中,界面设计工作一点点的被重视起来。做界面设计的“美工”也随之被称之为“UI设计师”或“UI工程师”。其实软件界面设计就像工业产品中的工业造型设计一样,是产品的重要卖点。一个电子产品拥有美观的界面会给人带来舒适的视觉享受,拉近人与商品的距离,是建立在科学性之上的艺术设计。检验一个界面的标准既不是某个项目开发组领导的意见也不是项目成员投票的结果,而是终端用户的感受。
②-平面设计的定义:
平面设计(graphic design),也称为视觉传达设计,是以“视觉”作为沟通和表现的方式,透过多种方式来创造和结合符号、图片和文字,借此作出用来传达想法或讯息的视觉表现。平面设计师可能会利用字体排印、视觉艺术、版面(page layout)、电脑软件等方面的专业技巧,来达成创作计划的目的。[1]平面设计通常可指制作(设计)时的过程,以及最后完成的作品。
平面设计的常见用途包括标识(商标和品牌)、出版物(杂志,报纸和书籍)、平面广告,海报,广告牌,网站图形元素、标志和产品包装。例如,产品包装可能包括的商标或其他的艺术作品、编排文本和纯粹的设计元素,如风格统一的图像,形状,大小和颜色。组合是平面设计的最重要的特性之一,尤其是当产品使用预先存在的材料或多种元素融合。
③-网站设计的定义:
简单来说,网站设计的目的就是产生网站。简单的信息如文字,图片(GIFs, JPEGs,PNGs)和表格,都可以通过使超文件标示语言、可扩展超文本标记语言等标示语言放置到网站页面上。而更复杂的信息如矢量图形、动画、视频、声频等多媒体档案则需要插件程序来运行,同样地它们亦需要标示语言移植在网站内。网页设计是设计过程的前端(客户端)的设计通常用于描述一个网站,包括写标记,但是这是一个灰色地带,因为这还覆盖了网络的发展。网页设计师预计将有意识的可用性,如果他们的作用,需要创建标记,那么它们也有望成为最新的网页易读性指引。网站设计(Web Design),网站设计是一个把软件需求转换成用软件网站表示的过程,就是指在因特网上,根据一定的规则,使用Dreamweaver、photoshop等工具制作的用于展示特定内容的相关网页的集合。简单地说,网站是一种通讯工具,就像布告栏一样,人们可以通过网站来发布自己想要公开的资讯(信息),或者利用网站来提供相关的网络服务(网络服务)。人们可以通过网页浏览器来访问网站,获取自己需要的资讯(信息)或者享受网络服务。网站它是由域名(俗称网址),网站源程序和网站空间三部分构成。其中域名它是类似于互联网上的门牌号码,是用于识别和定位互联网上计算机的层次结构式字符标识,与该计算机的互联网协议(IP)地址相对应。而网站设计是设计师通过像Frontpage或Dreamweaver等工具来对网站进行编辑的!
二、UI设计、平面设计、网站设计所需的工具:
从左开始一次为:Photoshop、Illustrator、CorelDraw、Indesign、Fireworks、DreamWeaver、Flash 、HTML5、CSS(CascadingStyleSheets)、Axure RP Pro 7.0、IOS、Android。
2、平面设计所需的软件工具:
Photoshop、Illustrator、CorelDraw、Indesign、Fireworks、PageMaker。
3、网站设计所需的软件工具:
①Photoshop:
学习图像处理、编辑、通道、图层、路径综合运用;图像色彩的校正;各种特效滤镜的使用;特效字的制作;图像输出与优化等,灵活运用图层风格,流体变形及褪底和蒙板,制作出千变万化的图像特效。
②Freehand:
不论是个人作品设计、公司徽标、海报制作,都可以轻松完成,应用于广告、印刷等行业
③CorelDraw:
通过CorelDRAW9的全方面的设计及网页功能融合到现有的设计方案中,制作矢量的插图、设计及图像,出色地设计公司标志、简报、彩页、手册、产品包装、标识、网页及其它。
④Illustrator:学习图形绘制、包装、宣传页的制作,让你更加方便地进行LOGO及CI设计,不到一个月,您就会成为一名真正的美术大师,在 Photoshop的基础上再学它如虎添翼,效率成倍提高。
⑤Microsoft FrontPage
如果你曾对Word很熟悉,那么相信你用 FrontPage进行网页设计一定会非常顺手。使用FrontPage制作网页,你能真正体会到“功能强大,简单易用”的含义。页面制作由FrontPage中的Editor完成,其工作窗口由3个标签页组成,分别是“所见即所得”的编辑页,HTML代码编辑页和预览页。FrontPage带有图形和GIF动画编辑器,支持CGI和CSS。向导和模板都能使初学者在编辑网页时感到更加方便。
FrontPage最强大之处是其站点管理功能。在更新服务器上的站点时,不需要创建更改文件的目录。FrontPage会为你跟踪文件并拷贝那些新版本文件。FrontPage是现有网页制作软件中惟一既能在本地计算机上工作,又能通过Internet直接对远程服务器上的文件进行工作的软件。
⑥Netscape编辑器
Netscape Communicator和Netscape Navigator Gold3.0版本都带有网页编辑器。如果你喜欢用Netscape浏览器上网,使用Netscape编辑器真是简单方便!当你用Netscape浏览器显示网页时, 单击编辑按钮,Netscape就会把网页存储在硬盘中,然后就可以开始编辑了。你也可以像使用Word那样编辑文字、字体、颜色,改变主页作者、标题、背景颜色或图像,定义描点,插入链接,定义文档编码,插入图像,创建表格等,是不是与FrontPage 2000还有些像?但是,Netscape编辑器对复杂的网页设计就显得功能有限了,它连表单创建、多框架创建都不支持。
Netscape编辑器是网页制作初学者很好的入门工具。如果你的网页主要是由文本和图片组成的,Netscape编辑器将是一个轻松的选择。如果你对HTML语言有所了解的话,能够使用Notepad或Ultra Edit等文本编辑器来编写少量的HTML语句,也可以弥补Netscape编辑器的一些不足。
⑦Adobe Pagemill
Pagemill功能不算强大,但使用起来很方便,适合初学者制作较为美观、而不是非常复杂的主页。如果你的主页需要很多框架、表单和Image Map图像,那么Adobe Pagemill的确是你的首选。 Pagemill另一大特色是有一个剪贴板,可以将任意多的文本、图形、表格拖放到里面,需要时再打开,很方便。
⑧Claris Home Page
如果使用Claris Home Page软件,你可以在几分钟之内创建一个动态网页。这是因为它有一个很好的创建和编辑Frame(框架)的工具,你不必花费太多的力气就可以增加新的Frame(框架)。而且Claris Home Page 3.0集成了FileMaker数据库,增强的站点管理特性还允许你检测页面的合法连接。不过界面设计过于粗糙,对Image Map图像的处理也不完全。
⑨DreamWeaver
自制动态HTML动画的网页
DreamWeaver是一个很酷的网页设计软件,它包括可视化编辑、HTML代码编辑的软件包,并支持ActiveX、JavaScript、Java、Flash、ShockWave等特性,而且它还能通过拖拽从头到尾制作动态的HTML动画,支持动态HTML(Dynamic HTML)的设计,使得页面没有plug-in也能够在Netscape和IE 4.0浏览器中正确地显示页面的动画。同时它还提供了自动更新页面信息的功能。
DreamWeaver还采用了Roundtrip HTML技术。这项技术使得网页在DreamWeaver和HTML代码编辑器之间进行自由转换,HTML句法及结构不变。这样,专业设计者可以在不改变原有编辑习惯的同时,充分享受到可视化编辑带来的益处。 DreamWeaver最具挑战性和生命力的是它的开放式设计,这项设计使任何人都可以轻易扩展它的功能。
⑩Fireworks
第一款彻底为Web制作者们设计的软件
Fireworks的来头实在不小,它的出现使Web作图发生了革命性的变化。Fireworks是专为网络图像设计而开发,内建丰富的支持网络出版功能,比如Fireworks能够自动切图、生成鼠标动态感应的javascript。而且Fireworks具有十分强大的动画功能和一个几乎完美的网络图像生成器(Export功能)。它增强了与dreamweaver的联系,可以直接生成dreamweaver的Libaray甚至能够导出为配合CSS式样的网页及图片!
⑪Flash
让你的网页动起来
Flash是用在互联网上动态的、可互动的shockwave。它的优点是体积小,可边下载边播放,这样就避免了用户长时间的等待。FLASH可以用其生成动画,还可在网页中加入声音。这样你就能生成多媒体的图形和界面,而使文件的体积却很小。FLASH虽然不可以像一门语言一样进行编程,但用其内置的语句并结合JavaScripe,您也可做出互动性很强的主页来。有人曾经说过:下个世纪的网络设计人不会用FLASH,必将被淘汰出局!我相信这句话没错!
⑫HotDog Professional
制作要加入多种复杂技术的网页
HotDog是较早基于代码的网页设计工具,其最具特色的是提供了许多向导工具,能帮助设计者制作页面中的复杂部分。HotDog的高级HTML支持插入marquee,并能在预览模式中以正常速度观看。这点非常难得,因为即使首创这种标签的Microsoft在FrontPage中也未提供这样的功能。HotDog对plug-in的支持也远远超过其他产品,它提供的对话框允许你以手动方式为不同格式的文件选择不同的选项。但对中文的处理不很方便。
HotDog是个功能强大的软件,对于那些希望在网页中加入CSS、Java、RealVideo等复杂技术的高级设计者,是个很好的选择。
⑬HomeSite
制作可完全控制页面进程的网页
Allaire的HomeSite是一个小巧而全能的HTML代码编辑器,有丰富的帮助功能,支持CGI和CSS等等,并且可以直接编辑perl程序。HomeSite工作界面繁简由人,根据习惯,可以将其设置成像Notepad那样简单的编辑窗口,也可以在复杂的界面下工作。
HomeSite更适合那些比较复杂和精彩页面的设计。如果你希望能完全控制你制作的页面的进程,HomeSite是你最佳选择。不过对于生手过于复杂。
⑭Microsoft Visual Studio
是美国微软公司的开发工具包系列产品。
该系列的版本有:2003、2005、2008、2010、2012、2013、2015、2015 RTM和未来的版本;
适合开发动态的aspx网页,同时,还能制作无刷新网站、webservice功能等。
⑮Jbuilder
一个可视化JAVA开发工具。它是在Java2平台上开发商业应用程序、数据库、发布程序的优秀工具。它支持J2EE,所以程序员可以快速的转换企业版Java应用程序。
不论是各种版本,均适合使用其开发出JSP网页。
三、UI设计、平面设计、网站设计的设计方向/方法/步骤/流程:
1、UI设计方向
UI是用户界面,是英文User和 interface的缩写。从字面上看是用户与界面2个组成部分,但实际上还包括用户与界面之间的交互关系,所以这样可分为3个方向,他们分别是:用户研究、交互设计、界面设计。
①、用户研究
用户研究包含两个方面:一是可用性工程学(usability Engineering),研究如何提高产品的可用性,使得系统的设计更容易被人使用、学习和记忆;二是通过可用性工程学的研究,发掘用户的潜在需求,为技术创新提供另外一条思路和方法。
用户研究是一个跨学科的专业,涉及可用性工程学、人类功效学、心理学、市场研究学、教育学、设计学等等学科。用户研究技术是站在人文学科的角度来研究产品,站在用户的角度介入到产品的开发和设计中。
用户研究通过对于用户的工作环境、产品的使用习惯等研究,使得在产品开发的前期能够把用户对于产品功能的期望、对设计和外观方面的要求融入到产品的开发过程中去,从而帮助企业完善产品设计或者探索一个新产品概念。
他是得到用户需求和反馈的途径,也是检验界面与交互设计是否合理的重要标准。
②交互设计
这部分指人与机之间的交互工程,在过去交互设计也由程序员来做,其实程序员擅长编码,而不善于与最终用户交互。所以,很多的软件虽然功能比较齐全,但是交互方面设计很粗糙,繁琐难用,学习困难。使用这样的软件后,不是使人聪明与进步而是让人感到愚弄与羞辱。许多人因为不能操作电脑软件而下岗失业,这样的交互使电脑成为让人恐惧的科技怪兽。于是我们把交互设计从程序员的工作中分离出来单独成为一个学科,也就是人机交互设计。他的目的在于加强软件的易用、易学、易理解,使计算机真正成为方便地为人类服务的工具。
③界面设计
在漫长的软件发展中,界面设计工作一直没有被重视起来。做界面设计的人也被贬义的称为“美工”。其实软件界面设计就像工业产品中的工业造型设计一样,是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受,拉近人与电脑的距离,为商家创造卖点。界面设计不是单纯的美术绘画,他需要定位使用者、使用环境、使用方式并且为最终用户而设计,是纯粹的科学性的艺术设计。检验一个界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的结果,而是最终用户的感受。所以界面设计要和用户研究紧密结合,是一个不断为最终用户设计满意视觉效果的过程。
2、平面设计的设计方法/步骤:
①、调查
调查是了解事物的过程,设计需要的是有目的和完整的调查。背景、市场调查、行业调查(关于品牌、受众、产品……)、关于定位、表现手法、……调查是设计的开始和基础(背景知识)。
②、内容
内容分为主题和具体内容两部分,这是设计师在进行设计前的基本材料。
③、理念
构思立意是设计的第一步,在设计中思路比一切更重要。理念一向独立于设计之上。也许在你的视觉作品中传达出理念是最难的一件事。
④、调动视觉元素
在设计中基本元素相当于你作品的构件,每一个元素都要有传递和加强传递信息的目的。真正优秀的设计师往往很“吝啬”,每动用一种元素,都会从整体需要出发去考虑。在一个版面之中,构成元素可以根据类别来进行划分,如可以分为:
标题、内文、背景、色调、主体图形、留白、视觉中心等等。平面设计版面就是把不同元素进行有机结合的过程。例如在版式当中常常借助框架(也叫骨骼),就有很多种形式,规律框架和非规律框架,可见框架和隐性框架;还有在字体元素当中,对于字体和字型的选择和搭配的好坏就是一个非常有讲究的。选择字体风格的过程就是一个美学判断的过程,还有在色彩这一元素的使用上,能体现出一个设计师对色彩的理解和修养。色彩是一种语言(信息),色彩具有感情,能让人产生联想,能让人感到冷暖、前后、轻重、大小等等。善于调动视觉元素是设计师必备的能力之一。
⑤、选择表现手法
手法即是技巧,在视觉产品泛滥的今天要想把受众打动以并非易事,更多的视觉作品已被人们的眼睛自动的忽略掉了。要把你的信息传递出去有几种方法呢?一种是完整完美的以传统美学去表现的设计方式,会被受众欣赏阅读并记住。二种是用新奇的或出奇不意的方式可以达到(包括在材料上)三种是疯狂的广告投放量,进行地毯式的强行轰炸。而我们更需要那一种呢?虽然三种方法都能达到目的,但我们清楚他们的回报是不同的。
我们在三大构成中学过很多种图形的处理和表现手法,如对比、类比、夸张、对称、主次、明暗、变异、重复、矛盾、放射、节奏、粗细、冷暖、面积等形式。另外还有从图形处理的效果上又有手绘类效果,如油画、铅笔、水彩、版画、蜡笔、涂鸦……还有其他的如摄影、老照片、等等。那么你要选择那一种呢?这取决于你的目的和目标群体,以及你的设计水平。
⑥、平衡
平衡能带来视觉及心理的满足,设计师要解决画面当中力场的平衡,前后衔接的平衡,平衡感也是设计师构图所需要的能力,平衡与不平衡是相对的,以是否达到主题要求为标准。平衡分为对称平衡和不对称平衡,包括点、线、面、色、空间的平衡。
⑦、出彩
记住,你要创造出视觉兴奋点来升华你的作品。
⑧、关于风格
作为设计师有时是反对风格的,固定风格的形成意味着自我的僵死,但风格同时有是一个设计师性格、喜好、阅历、修养的反映,也是设计师成熟的标志,以为“了解大同,才能独走边缘”。
⑨、制作
检查项目包括:图形、字体、内文、色彩、编排、比例、出血等。
要求:视觉的想象力和效果要赏心悦目,而更重要的是被受众理解!
3、网站设计的设计流程:
①、网站设计流程一:确定风格
网站的风格通过网站的色彩、技术、文字、布局、交互方式可以概括出一个站点的个性:是粗犷豪放的,还是清新秀丽的;是温文儒雅的,还是执着热情的;是活泼易变的,还是墨守成规的。在明确自己想给人以怎样的印象后,要找出网站中最有特色的东西,就是最能体现网站风格的东西。并以它作为网站的特色加以重点强化、宣传。风格的形成不是一次定位的,你可以在实践中不断强化、调整、改进。
②、网站设计流程二:搜集素材
查找并收集有关的文字、图片、声音、影像等素材,并对所收集的素材进行整理、处理。
③、网站设计流程三:网站布局
首页页面:首页主题还体现在logo及网站标题上。准确概括的首页主题可以很好帮助用户选择自己有确切需求的网站。
首页导航:网站导航可以看做是对网站内容的分类把网站的内容进行细分方便用户跟据个人需求选择浏览相应栏目页面。
首页内容:页面的内容布局需先对网站的用户群体进行需求分析把用户关注最多的内容放置在首页的最重要位置。一般按照用户的浏览方式页面内容布局按照内容重要程度由左上到右下进行布置。
④、网站设计流程四:LOGO设计
怎样设计logo是许多网站设计师比较头疼的事情,在设计之前要进行基本的调研分析,也就是对该企业做全面的调查,然后就是要挖掘所需要的素材,最后就是进行设计开发了,这也是最重要的一步,只有经过反复的推敲修改,才能设计出令人满意的标志。
⑤、网站设计流程五:导航设计
在设计导航之前,要充分的分析用户需要什么?从导航的有效性、实现度和利用率来设计导航。
⑥、网站设计流程六:banner设计
在设计banner之前,要和客户沟通一下他们想在banner上突出什么重点,然后有针对的展现banner上的内容。当我们确定重点之后,banner的色彩搭配要明亮干净要与整个页面相协调。
⑦、网站设计流程七:友情链接设计
设计网站的友情链接要考虑一下网站优化的问题,链接一定不能是滚动的,因为滚动的链接没有人交换,最好是在底部一一列出来。
四、注意事项
视觉会给人带来一连串的生理上的、心理上的、情感上的、行动上的反应,设计是视觉经验的科学,他包括两个方面,一个是不以人为而改变的即生理感受的人的基本反应,另一个是随即的或不确定因素构成。如个人喜好,性格等等、等等。
1、相对稳定的方面:
主要是生理上的视知觉,人们的一些视觉习惯、视觉流程、视觉逻辑,如从上到下,从左到右,喜欢连贯的、重复,喜欢有对比的,还有在颜色方面人们最喜欢的其实是有对比的互补色等等。这都是跟人们的生理上的习惯有关,都是人生理机能的本能反应。作为设计师应该对这些知识能充分了解、灵活运用,设计是对人本的关注,首先应对文化与人的感知方式这些相对稳定的方面进行研究,并且需要我们在实践中去总结。
2、不稳定的方面:
不稳定的方面主要是指情感、素质、品位、阅历上的不同,在设计过程中你需要具备一定的判断和把握能力,你需要客观和克制,才能完成卓越的设计。
3、设计思维的科学:
设计是必须具有科学的思维方法,能在相同中找到差别,能在不同当中找到共同之处,能掌握运用各种思维方法,如纵向关联思维和横向关联思维以及发散式的思维,善于运用科学的思维方式找到奇特的新的视觉形象,才能不断发现新的可能。
平面视觉的科学其实是一个很大很深的学问,只有在这门学问的健全和深入的推广,才能保证设计水平的普遍提高。在这里只是抛砖引玉式的提出这一观点,还需要日后结合其他学科的研究成果进行系统的整理和论述。
4. 给别人做前端网页设计,收多少钱比较合适
按每页800来收就可以了,毕竟你是学生.不过不能再低了,商业是谈商业不是谈感情.你经验不足可以少收,但是说朋友义气,抱歉我鄙视你,并且你朋友也不会念你好,而且以后你工作后你朋友找你还会按你现在的价格走,你如果抬高就骂你不讲交情.反而伤和气.
所以你要报的价格就是要报商业价格.你说的高只是你是学生,不知道价值.那换个话说,如果这个网站发了,你认为他们会给你分红么,估计想都想不起你.设计有设计的价值,不要让你的价值变低.
5. 前端必备的切图知识
本文以Adobe Photoshop CC 2018 (32 Bit)版本为例介绍,不同版本可能有细微差异。
由于ps默认的是以厘米为单位,因此需要修改为我们前端所用的以像素为单位:
编辑-->首选项-->单位与标尺-->按下图修改即可:
由于ps默认未启用标尺及智能参考线等,因此需要自行开启:
如果左侧工具栏未开启显示,则也可在此设置让其显示;另外需要提的是,信息面板需要一些额外的设置:
信息面板选项设置
以上设置完后,建议保存工作区以保存之前预设的一些设置。
保存工作区方法: 窗口-->工作区-->新建工作区
这里就不解释了,直接上图:
选择移动工具 ---> 勾选自动选择及选择图层选项(不是组) --->选择预切图的位置(选择后会自动跳至相应图层)--->右键相应的图层--->选择转换为智能对象--->启用选框工具框选相应区域--->复制--->新建文件--->粘贴--->选择图像菜单--->选择裁切--->选中基于透明像素--->确定即可;
此方法比较适合不规则的图像,比如logo等;
拉好参考线后,选择切片工具--->点击 基于参考线的切片
--->文件--->导出--->存储为web所用格式--->选择png24--->存储--->选中所有用户切片;
由于有很多条参考线存在时会相互干扰,我们可以将原有图片裁剪成几个独立的部分,然后再使用参考线切图法即可。
文件--->导出(Photoshop低级版本此处是脚本而不是导出)--->将图层导出到文件--->设置文件类型(PNG24,勾选透明区域、交错及裁切图层)
完成后,ps脚本会自动运行。可能耗时比较长。
该方法需要事先设置两个地方:
a、编辑-->首选项-->增效工具-->启用生成器
b、文件-->生成-->图像资源
上述两个设置完成后,启用移动工具,选择需要的切图,在其图层上加后缀名,则在原始psd文件目录下的xxxxxx-assets文件夹中会自动生成相应格式的图片(甚至svg)。
当然我们还可以在后缀名添加数字来表示图片的质量。比如logo.jpg8(表示80%的质量),logo.png24,logo.png8等。当然如果不加数字的话则默认取最大值;
不仅如此,我们还可以设置生成后的大小倍数 比如命名 300% logo @2x.png 则表示会在原有基础上放大三倍大小导出。这一点对视网膜屏很有用。
6. html中如何设置浏览器中标题前的logo
在<head></head>标签之间输入
<link rel="icon" href="图片位置" type="image/x-icon"/>
或者用favicon表示:
规格有32×32、48×48、64×64、128×128,直接用PS做一个图片,命名为favicon.ico,然后用FTP软件上传到网站根目录替换原来的文件即可,如果不想用FTP软件,也可以在网站的后台进行更换。
Favicon是favorites icon的缩写,亦被称为website icon(网页图标)、page icon(页面图标)或urlicon(URL图标)。Favicon是与某个网站或网页相关联的图标。
(6)前端logo设计扩展阅读
关于favicon图标的用途
favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo,比如下面的网络的logo, 目前主要的浏览器都支持favicon.ico图标 。
1、生成图标ico
很多网站都支持在线将图片转成ico格式,图片的大小一般是几百k左右
在线生成ico
7. 网页设计做为平面 设计做哪些
网页设计:
纯网站本身的设计比如文字排版,图片制作,平面设计,三维立体设计,静态无声图文,动态有声影像等
平面设计:
1.标志设计(logo设计,商标设计)
2.CIS设计、VI设计(企业形象识别系统设计)
3.广告设计、广告创意设计
4.海报设计、DM设计(宣传单设计)
5.样本设计、宣传手册设计、画册设计
6.楼书设计、年报设计
7.包装设计
8.书籍插画绘制、贺卡设计、请柬设计
9.报纸、杂志排版设计
10.各类印刷品设计
源码时代网页设计!
8. 什么是UI设计
很多想要自学UI设计的小伙伴,苦于没有好的学习计划、课程大纲,学习效果很不好,花了时间也没有将自己的知识体系建设全面。那自学UI设计到底应该如何学习呢?
在讲学习流程之前,我们先来来简单介绍一下什么是UI设计以及UI设计的前景如何。因为只有你了解了UI设计之后,你才知道自己是否对其感兴趣,是否是真的愿意花时间和精力去学习。
一、UI设计
UI(UserInterface),中文名“用户界面”。Ps:(网络解释)UI是指对软件的人机交互、操作逻辑、界面美观的整体设计。
那互联网的这波浪,无论前浪,还是后浪都从未消停过。你经常看到“互联网+”这样的组合,通俗解释“互联网+”就是“互联网+各个传统行业”,但这并不是简单的两者相加,而是利用信息通信技术以及互联网平台,让互联网与传统行业进行深度融合,创造新的发展生态。
在这其中,又与UI有什么紧密联系呢?
把传统行业放到互联网上,肯定需要用一个界面来展示,哪怕只是一个简单的网页,而每一个互联网下的产品无论是PC端还是移动端,无论传统行业还是非传统行业,最终呈现都要以UI界面为依托,供用户使用查看。这其中又不仅要视觉产出,还要好的交互和用户体验。
举个例子,说说我们平常不太关注的来电接听这回事。
苹果手机在不锁屏的状态下,来电显示时,接电话在右边显示绿色,挂电话在左边显示红色。一般情况下右手拿电话,大拇指操作,绿色是接听电话,这是我们的常规操作,使用频率很高,所以在右边离大拇指更近,而挂电话频率不高所以在左边远一些。从色彩体验上分析,红色也有警示警告的作用,
但如果红色按键和绿色按键换个位置,其实并不会影响视觉,但却不是一个好体验,可能随时都会有挂电话的误操作
UI无处不体现在我们生活之中,无论大小,它都存在于你所看到的,你所触碰到的体验里。所以UI不单纯是美工,还要考虑到视觉效果和用户体验。而用户是很挑剔的,对视觉的需求和对体验的需求都在不断的发生变化和提高。所以这也造就了UI设计师这种不需要敲代码,但仍然可以拿高薪的互联网岗位。
二、UI设计学习计划
很多小伙伴没有严格的学习计划,导致于自学周期被自己拖得很长,所以自学UI设计,一定要制定适合自己的学习计划,严格按照学习计划去完成学习目标,才能获得最终的胜利。那每个人的学习能力和技能掌握情况不同,在这里分享一个零基础全天候以周划分的学习计划。希望你可以针对自己的情况,参考此计划为自己的量身打造UI设计自学计
越简单的元素搭配,就越考察一个设计师的基础功,如果没有过硬的技术和扎实的基本功,就难以准确地传达产品自身调性和营销卖点。
我们都知道创意思维对于设计师的重要性,却也不能忽略基本功对于设计师的必要性。只有坚持不断的负重训练,扎实美术功底,才能在日后的商业实战中轻松驾驭各种风格。
第一周:手绘
手绘的重点主要是培养学员的形体结构,光感、空间的关系,这算是一个审美培养的启蒙,时下最流行的矢量插画就和手绘密切相关。
第二、三周:PS、AI基础软件的学习
从零开始学习软件,需要用实际的案例去学习,这样更加容易上手,并且UI设计的学习并不是只是简单的学习软件工具,很多在人都以为UI设计只要会了PS、AI等就可以了,其实让通过实际的案例去了解设计背后的意义即设计思维、创意理解,才是更为重要的目的。
但是只学思维也不行,我们也要加强设计的基本功,对软件完全的精通掌握,这是必须的。
第四、五周:平面构成、Logo
掌握平面设计中点、线、面,加以延伸到到Logo设计,Logo一方面是包括图形另一方面是包括字体,所以了解文字结构是非常基础的,以及如果这一阶段学的非常好,接Logo私单,价格高到不敢相信。
并且logo品牌部分学习中,要会从Logo的形式、气质、基础属性、思维方式、以及标准制图等去深入学习。一个简单的图形通过形式的变形而演变出千变万化的造型,如此多的变化还怕设计不出Logo吗?
举例:从形入手,一个圆可变实心的圆、可变空心的、可变半圆的还可变椭圆、半圆,那是不是就能联想到鸡蛋、煎蛋、荷包蛋、帽子、水杯呢?
第六周:品牌Logo定稿以及VI手册设计
图片来源:阿多比设计学院学员作品
这一周其重点是甲方思维思考设计,对,就是那个烦人的甲方爸爸,需要学习换位思考。
整个第一阶段的学习内容都是非常基础的,目的是培养设计思维,正所谓懂用户所想,还不能设计出好产品?
第七周:响应式网站、一屏式网站
从案例来讲述网页设计的构成、颜色、字体、功能、按钮以及设计规范、排版规范。
第八周:后台数据
除了后台设计,更多的是后台的数据统计处理,如何做到简单化、明了化。
第九周:电商设计
电商平台首页设计,每一个月各大购物平台都会有全站式的活动,活动主题都不一样,所以其实电商设计的人才缺口是非常大的。
第十周:淘宝平台详情页、后台
这一部分是可以自己去申请淘宝店、上架产品,任何学习都没有直接上手来得快。实操实练,自己去体会各大平台的规范,才会了解得更加清楚。
第十一周:C4D、Banner
进入3D训练啦,丰富视觉效果,提高就业竞争能力,多会一门技术,就多一些可能,这也是我们要为什么不断学习提升自己的原因。
第二阶段,更多的是网页的设计训练,重点掌握企业站界面设计规范和输出规范,且能够根据企业真实需求设计页面。
第十二周:用户体验、竞品分析、原型图
本周开始设计APP,通过数据分析来做竞品分析,使用Axure来绘制APP的原型图。
第十三周:图标
有意思的图标也是完整APP设计的重要一环。
第十四周:界面、胶囊
通过标志性APP来讲弹窗页、闪动页。
第十五周:界面设计
继续完成APP,并学会切图、命名、标注、打包、交接(前端小哥哥、小姐姐打不打就看这周的学习内容了)
第十六周:运营界面
营销推广性的用户思维培养,把握用户的痛点提升整体运营界面,达到营销推广的目的。这一般都是通过突然跳出来的弹窗、闪屏等,比如促销性质的页面,增加了视觉感染力,促进了用户的点击。
第十七周:交互动效
学好AE动效会非常加分,因为它可以准确的传达出你的思路,演示你想要的表达的效果。这必将成为UI的流行趋势,不想要被市场淘汰,一定要继续学习啊!
这一个阶段,可以尝试着手设计属于自己的APP,你可以选择自己喜欢的主题,没有局限性,这可以成为零基础转行的你的作品集内容哦。
第十八周:前端
大家都知道与UI设计师密切合作的是前端,那作为一个UI设计师,只有懂了前端,这样才会合作得更好,提升工作的效率。我们可以学习HTML5,学习CSS3等。
虽然是以周划分,安排得满满当当,这样学习流程适合大多数零基础的小伙伴,每周的内容如果学习的不扎实,可以适当停留脚步,因为每个人的学习能力不同,学习掌握情况不同。一定要将知识学扎实,一步一个脚印的往前走,才能真正将UI设计知识掌握牢靠。
9. 汽车前端立体标志和嵌入的平面标志有什么不同
奔驰了立标一般都是优雅型的
在进气格栅的大标是时尚型的,一般运动的车例如SL、SLK、G等都是大标。
奔驰的顶级S级和商务行政车E级就是立标。
但奔驰C级轿车是既有大标款又有立标款两种。
如C200大标的那款就是C200时尚型,立标的是C200优雅型。
但是经常我们会在路上看到同时有大标加立标,那就是本是立标车自行又把进气格栅改了的。
10. 前端怎么改logo啊,我网站的我知道在哪里,但是不会改
如果你是用模板的话,自己不懂代码,看不到在哪里,你就到程序里,找到logo的这个图片,用PS看他的宽度和高度以及图片格式,你做一个和这个一样大小的,直接覆盖替换掉就行了