对于前端切图,相信很多小伙伴都不会陌生,但是对于新手,有时却很棘手,想着我本是来写代码的,你给我一张图干嘛的, 有时,或许你总奢望着UI设计师,把所有的图都给你切好,你只管撸码的,然而事实并非如此,有时候呢,设计师给我们的图,也并非是一成不变,往往也需要作一些调整,更改,完美的将UI设计图,进行还原实现产品经理的意图,是前端小伙伴职责所在,那么熟练简单的ps操作,就很重要了,虽然我们不是设计者,但是我们是具体的实现者,实现从0到1的过程,至于前端ps操作,绝大多数工作是简单的切图(抠图),测量,图片简单的处理,将图片利用web技术进行填充布局实现静态页面展现就可以了,至于,ps软件,我也只是停留在简单的使用,有时候,在一些群里,看到一些小伙伴,对于切图,有些畏惧,打开ps软件,无从下手,有时候呢,即使自己曾今,ps技术玩的很溜,但是只要一段时间没有去接触,就会很陌生,一些习以为常的技巧,忘得一干二净,非常苦恼,您将在本篇学会一些常用的奇淫绝技,完全可以胜任ps切图工作,今天,就我的学习和使用,跟大家分享一下自己的学习心得,如果你已经是老司机了,可以直接忽略,欢迎路过的老师,多提意见和指正
一般来说，我们的个人博客都会放上一些社交图标以及社交链接。这样一来，想要关注我们更多的最新研究或工作的读者就可以很快找到路径。于是，在 Jekyll 博客主题设计的时候，通常会在个人简介的地方放置几个社交小图标，点击社交小图标即可把读者带到你的社交个人主页上。对于不同类型的作者，常用的或者关注的社交平台基本上不大一样，社交小图标也会有不一样的需求。比如说，对于从事科研工作的人来说，像谷歌学术、ResearchGate、ORCID 等等能够列举发表论文或者相关研究的平台就比较重要；对于一般程序员来说，像 Github、Gitlab、Segmentfault、CSDN、简书等等能够展示自己所参与的项目和技术心得体会的平台就比较重要；对于前端设计师来说，像 Instgram、UI 中国、Dribble等等能够展示 UI 设计作品的平台就比较重要。因此，对于一款 Jekyll 博客主题的设计者来说，同时要兼顾到这么多不同的需求可能会有点为难，毕竟领域不同、了解的程度也很有限。
我们需要把它裁切并转成svg格式再生成字体图标，比较繁琐，而我新系统目前也没有装相应软件，所以这里不采用这些图标，选用网上已有类似的字体图标来代替。
公司现在已有一整套的Icon，那我们应该如何绘制一个Icon，让其风格与之前的保持统一呢。
Font Awesome介绍 Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。 一个字库，675个图标 仅一个Font Awesome字库，就包含了与网页相关的所有形象图标。 无需依赖JavaScript Font Awesome完全不依赖JavaScript，因此无需担心兼容性。 无限缩放 无论在任何尺寸下，可缩放的矢量图形都会为您呈现出完美的图标。 如言语一般自由 Font Awesome完全免费，哪
先来简单的介绍一下字体图标。字体图标是近两年才流行起来的技术，主要是因为 CSS3 增加了一个非常实用的属性 @font-face。传统的网页中的字体设置，使用 font-family 属性来定义，而且受限于浏览者电脑上所安装的字体，如果浏览者电脑上没有安装对应字体，那么网页渲染起来就会使用其他字体来代替。
导读：在产品中适当使用图标，可以让产品更生动，也更简洁。在前端项目中，处理和引入图标都是必不可少的环节。在 Web 产品中引入图标，大致经历过如下几个阶段：使用独立的图片来引入图标、使用 CSS sprites 技术、使用字体图标（font icons）、使用 SVG（inline SVG/SVG sprites）、在前端视图层框架中封装组件。本文将简单梳理一下图标相关的工作流程的演进，以及我们在百度设计语言系统推进过程中相关的一些尝试。
我了解设计一个既漂亮又实用的界面的过程 — 通常较长，而且需要反复修改。大多数设计师都有类似的经历。
今日打卡任务 Day7参考答案 打卡作业 Day07 作业布置 一. 完成课堂所有的代码 已完成 二. 自己查一个列表并且完成 三. 完成table的作业内容 四. 说出表单元素什么情况下使用name和value？ name元素的作用是后台接收数据时使用的键值对中的键(key) 随着表单的提交而一起提交 表单中不可或缺的元素 一个form表单中该元素的名称对应不同类型的input是不同的 value是 后台接收数据时使用的键值对中的值(value) value可以有默认值 五. 说出form提交时的属性作
响应式web设计对于解决多类型屏幕问题来说是个不错方案，但从印刷的角度来看，其却存在着很多的困难。没有固定的页面尺寸、没有毫米或英寸，没有任何物理限制，让人感到无从下手。随着建立网站可用的各种小工具越来越多，像素设计局限于桌面和移动端也已经成为历史。因此，现在就让我们来说明一下如何运用响应式web设计的各项基本原则来实现，而不是抗拒流畅的网页体验。为了简单起见，我们将着重讲布局（当然，响应式设计远远不止于此，如果你想进一步学习，可以搜索蚂蚁大喇叭学习）。
项目名称：品优购 项目描述：品优购是一个电商网站，我们要完成首页、列表页、详情页、注册页面的制作
这一次我想重点写一下：网页PC端产品设计规范和组的设计拆解，对项目的设计效率提升，有一定价值和意义。
图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。 我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了， 这就是字体图标（iconfont).
如今，移动应用程序市场极具竞争力，即使是经验丰富的投资者也需要花费大量精力来吸引用户的注意力。但这不是全部。有一个不那么明显的任务，但更重要的是 - 抓住观众。
点击右边列表”new set from selection“可选择你自己的svg图用于转换为字体图标
好比：我们去超市买水果，若买一个带回家一个，那么效率很低，不如买完一次性打包带回家更方便。
目前自己常用的图标库有两种： 1. 插件、库里面自带的图标库：如 * boostrap * element ui * vant * layui * H-ui * mui 等等 这些ui框架官方文档上都有详细的介绍使用说明 2. 常用图标库 * Font Awesome图标库 * iconfont 阿里图标库 这些图标库虽然官网都有介绍，但是使用起来并不需要像导入插件、库那样麻烦。下面就来说一下我今天get的小技巧。
前段时间注意到我们 APP 的包大小超过100MB了，所以随口跟吕老板说了下能否采用字体文件（.ttf）替代 PNG 图片，吕老板对应用瘦身很感兴趣因此让我做下技术调研。这篇文章主要是将我们的各个技术方案的思路做一下整理和总结，希望对大家有所帮助。
一、配色类网站 http://colorhunt.co 这个网站给我们提供了很多的配色方案，我们直接使用就OK了。使用方法也很简单，鼠标移动到对应的颜色上，我们就可以看到颜色的十六进制码，复制这个颜色
ABCmouse，一款全美知名、深受父母与儿童喜爱的英语启蒙教育App，拥有美国原汁原味的内容资源、地道发音、益智游戏与学习方法。本次和腾讯强强联手，除了内容本身的提升，腾讯ISUX设计团队也为产品塑
通过这篇文章，我将向大家介绍下关于设计的一些基本知识，让广大开发者在平时的开发中，可以更好的和设计、产品合作（撕逼）。
Android Asset StudioWeb版是一个非常好用的Andrid图标资源设计工具，它是由RomanNurik开发的。现在我们已经在ADT14里支持同样的功能。首先，你要打开新建向导（Ctrl-N）,选择Android分类，然后在其下找到名字为“Android Icon Set”的这一项：
静电说：首先说一句，我不想对软件中英文有太多的讨论，如果软件是英文阻碍了你的学习请另行选择其它适合你的，我不想在这问题上去扛。求汉化，有没有中文这些问题本人恕不回复，感谢理解。我只想安安静静的讨论软件功能本身的内容，如果大家有这方面的问题，欢迎留言提问，非常乐意回答。
CSS布局总算是告一段落啦,现在开始学习一些CSS的高级技巧,能坚持到这里真不容易.
今天这篇文章是教你十种UI设计常用字体特效，让你设计出更高逼格的作品。对于我们UI设计师来说，在日常的设计中，给字体增加特效，一直都是一件比较烦人的事。有的老板或客户提出的浮雕特效或阴影，有的时候按他们的要求设计可能会毁了整个作品。更多时候，我们都需要根据整体设计来确定字体使用什么样的特效。今天我们就来讲UI设计常用字体特效，请往下看。
静电说：新手在学习UI设计过程中，通常会陷入到一个误区中，就是把UI设计当算术题来做。比如经常会有同学问：UI界面中的字号最小是多少？UI界面模块中的间距有没有什么规则可以遵循？是不是一定要4的倍数？UI界面左右留白多少才合适，有规范吗？按钮的圆角多少才合适？
译者：Zz招锦 https://juejin.cn/post/6922416136294252557
图标是网站中非常友好的附加物，许多网站都会使用各种图标来美化页面样式，给用户提供更好的指引。本文将会和大家一起学习页面图标的发展历史，以及最优的解决方案。
Adobe InCopy（简称IC）文字编写和副本编辑软件，通常与InDesign软件协同使用，增强设计与编辑小组之间的协作。设计者用InDesign把版面排好后，输出给InCopy文档供十名文字编辑使用，他们可以随意修改文稿，随后把文档再寄回给排版者，文字会自动更新，版面丝毫没变，因为文字编辑没有修改版面的权限。
本文主要介绍了字体在网页设计中的重要性，包括字体选择、字体大小和行间距的使用，以及如何使用字体图标来提高用户体验。同时，还提供了一些关于字体样式、字体资源和参考资料的信息。
一般来说，网页上的字体使用的都是我们电脑里面的字体，比如我们常说的微软雅黑、宋体就是 windows 系统自带的字体。所以你可以看到网页的字体一般都比较中规中矩，不像平面设计那样各种新花样。
字体图标显示，引入css就足够了，无需引入 layui.js，使用到模块时才必须引入js文件
最近入手高清版的 MacBook Pro 之后，开始研究高清屏下一些图标怎么去展示的问题，一通瞎搜索，发现最好的方式是使用字体图标。国外这方面的资源很多，而国内图标字体非常少，今天终于找到一个中文字图标：Font屌（对于这个名字，各位自行评价吧...）。
TDesign 始终专注于将设计与研发紧密结合，以实现跨框架和跨终端的一致体验。字体是设计体系中不可或缺的组成部分，也是表达个性化的极佳媒介之一。与此同时，字体技术也在不断发展，那么如何在中文语言环境下创造更具均匀性、扩展性和通用性的字体呢？
分享一个 python 的库 ---fonttools，针对字体文件进行处理非常方便。
那 IDEA 的插件仓库其实提供很多主题插件，那有些小伙伴可能还不知道怎么去查找这些主题插件。
今天我们来分享几个美化 IDEA 设置技巧，让你的 IDEA 与众不同。 首先我们来看下 IDEA 默认设置，虽然不丑，但就是太单调，千篇一律。
以下内容由摹客团队翻译整理，仅供学习交流。摹客Mockplus是快速的原型设计工具。摹客iDoc是高效的在线协作设计平台。
image.png 为方便设计师进行设计，微信提供一套可供Web设计和小程序使用的基础控件库；同时提供方便开发者调用的资源。 基础样式库预览地址：https://weui.io 文末附规范文档PS
图标字体，相信大家都不陌生。包括 font-awesome，iconic 等等，都是很不错的图标字体服务。
设计行业经过几年的发展，已经进入到了相对成熟的时期。这无疑会对设计师有更高的要求和挑战。
这是一个关于在 unity 中从网络开发获取大量文件非常小的图标的简短提示。你所要做的就是打包所有你想在一种字体里使用的所有图标，那样你就可以这个图标作为文本保存到你的场景或是用户界面里了。有许多服务可以构建图标字体，但是我喜欢 IcoMoon 提供的免费和付费的图标集以及易于使用的 app。
在上文中介绍了使用 iconfont 的缺点，以及使用 SVG 的优点，简单归纳为以下几点：
领取专属 10元无门槛券
手把手带您无忧上云
