PS-实战-ICON图标

最新推荐文章于 2024-10-13 16:01:56 发布
原创 最新推荐文章于 2024-10-13 16:01:56 发布 · 791 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#PS #实战 #ICON图标

ICON图标

  • 制作大小256*256px

步骤

  1. 制作256*256的形状
  2. 按顺序对齐排列
  3. 依次选中形状，画出参考线
  4. 删除形状，仅留参考线显示形状大小
    在这里插入图片描述在这里插入图片描述

晴（白天）

  • 椭圆工具画圆
  • 图像填充为渐变，添加高光，反光（类似球形制作方式），倾斜45度光效
  • 添加内发光、打造内部边缘发光效果
    在这里插入图片描述
  • 添加外发光，打造外部轮廓发光效果
    在这里插入图片描述
  • 添加光芒效果

    • 方法1：

      • 复制大阳形状，取消其所有图层效果
      • 对形状进行羽化（F8属性-蒙板-羽化）
        在这里插入图片描述
        在这里插入图片描述
      • 羽化后对其压扁，对形状进行羽化可以随时进行修改

      在这里插入图片描述

      • 复制多个并进行旋转
        在这里插入图片描述
      • 叠加到太阳后面
        在这里插入图片描述

    • 方法2

      • 新建500*500正方形文档，填充黑色
      • 使用矩形选框，填充白色
      • 滤镜-风格化-风（ctrl+alt+f重复上次操作加强效果）
        在这里插入图片描述
      • ctrl+t 转变为横向放置，对齐边缘后再确定
      • 变成环状（滤镜-扭曲-极坐标）
      • 形成完美带有毛刺的闭环在这里插入图片描述
        在这里插入图片描述

    • 通过图层效果，颜色叠加修改圆环颜色，打造光芒效果
      在这里插入图片描述

  • 添加太阳内部效果
    • 新建图层，画一个比太阳大的黑色选区（前景色为黑色，背景色为白色）
    • 滤镜-渲染-云彩（使用的是前景色与背景色），图层样式改为叠加，移动图层，调整合适的太阳内部效果，ctrl+alt+g制作剪切蒙板，只对太阳生效
      在这里插入图片描述
      在这里插入图片描述
  • 滤镜-渲染-镜头光晕，调整到合适的高光点，添加蒙板，使用黑色画笔擦除不需要部分
    完整效果

晴（夜晚）

  • 复制上一个晴（只保留形状，去除所有效果），调整整体为青蓝色调（青蓝向白色渐变）
  • 新建图层，画一个黑色选区，滤镜-渲染-分层云彩（ctrl+alt+f重复上一次操作）构造合适图层
  • 框选一个合适大小的选区，滤镜-扭曲-球面化（打造立体效果），叠加，剪切蒙板
    在这里插入图片描述
    在这里插入图片描述
  • 加深背景明暗对比
    • 法1：修改形状本身颜色，加深渐变中的深色
    • 法2：曲线，色阶调色工具修改加深
    • 法3：复制一层球面化的图层
  • 斜面浮雕加深立体感
    在这里插入图片描述
  • 外发光添加外发光感
    在这里插入图片描述
  • 使用画笔添加点缀，添加外发光效果
  • 使用矩形添加流星效果，白色到透明的渐变矩形
    在这里插入图片描述

云彩

  • 黑色选区，滤镜-渲染-分层云彩，生成具有单独的云彩块
  • ctrl+m曲线，调整明暗，分出层次
  • rgb通道，复制一个对比明显的单色通道，ctrl+左键缩略图载入选区
  • 选中rgb通道，进入图层
  • ctrl+j复制载入的选区，隐藏原始图层，留下云彩，ctrl+u色相饱和度，明度调到最高，调整云彩白色亮度
  • 堆叠云彩，滤镜-模糊-高斯模糊，智能滤镜修改显示部分
    在这里插入图片描述
    在这里插入图片描述

小雨

  • 画笔画一个圆（80）
  • 涂抹工具（笔触180，比圆点大一圈），向上涂抹圆点，形成水滴状
    在这里插入图片描述
  • 填充为黑色，载入选区，编辑-定义画笔预设
  • 选定新定义的画笔，使用画笔设置：画笔笔尖形状-间距、形状、散布、纹理、传递、画下雨 在这里插入图片描述

霾

  • 画笔，竖者多个点（使用土黄色），拉伸
    在这里插入图片描述
  • 涂抹
    在这里插入图片描述

白色调为黑色

  1. 锁定透明像素，背景色填充（ctrl+delete）
  2. ctrl+shift+delete直接用背景色填充有内容的部分
  3. ctrl+u色相饱和度调整明度为最低

抠取选区中内容

  • 加载选区，ctrl+j复制，新生成的图层就只包含选区中的内容
  • 加载选区，反选（ctrl+shift+i）、删除其他元素，留下选中内容

参考线自动吸附

  • 视图-显示-智能参考线（选中）
  • 视图-对齐（选中）

设置背景丰富层次

  • 背景设置为青色
  • 添加图片，高斯模糊，模糊到只剩下颜色状态
  • 新建图层， 左上角到右下角紫色到透明渐变
  • 新建图层，右下角到左上角蓝色到透明渐变
    在这里插入图片描述
web版kettle图标显示异常，如何解决？
**My Coding Family**
03-13 734
🏆本文收录于《全栈Bug调优(实战版)》专栏，主要记录项目实战过程中所遇到的Bug或因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由🚀；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！
用PS设计icon
weixin_44588195的博客
04-08 552
用PS设计icon 1、上面这一套icon是我用PS设计的，从图中可以看见它主要采用的元素是苹果。设计这个东西有什么用呢？他可以用于你的手机主题展示，当然你自己也可以设计icon用来做你自己的手机图标。 2、上面这个是我做的展示，及一些简单的说明。 3、这里是icon使用的主要颜色，还有一个手机插件的设计。 4、这是手机效果图。 5、这个设计的灵感来...
PS形状 ICO图标
07-18
PS形状 ICO图标 Photoshop 形状资源 手机图标
教你如何用PS制作iOS端APP应用图标AppIcon.appiconset
App Store.公众号.小程序:分享录
05-23 2318
开发iOS端APP要准备18个不同尺寸的logo，虽然现在有网站提供在线生成APP应用图标，但是这样可能存在泄露高清logo甚至被抢占的风险，下面我将教大家如何用Photoshop制作iOS端AppIcon.appiconset。 其实很简单，我们只要按照Xcode提示做出对应尺寸的图片然后放到Images.xcassets->AppIcon.appiconset目录下并把图片名补充到Contents.json文件里即可。 用ps打开要logo，点菜单“图像”->“图像大小...”.
介绍使用Photoshop制作ico图标
KRISNAT
10-11 3770
Photoshop可以通过。插件生成ico，但需要我们自行安装，安装过程很简单。
如何使用ps制作ico图标文件
宁静致远的博客
11-01 1万+
然后调整图片大小，因为不调整的话会出现无法保存为ico文件的情况，因为ico文件最大像素为64x64,也就是4096像素。点击图像，选择图像大小，或者直接使用快捷键Ctrl+Alt+I。在这里你可以调整抠出来的图片边缘羽化程度，以及设置背景图层。最后是保存为ico文件格式，选择文件，点击存储为，也可以使用快捷键Shift+Ctrl+S。如何使用ps制作ico图标文件。我这里将他设置为64x64像素。
开发知识点-Android-实战
aming小老弟
08-06 6935
1.线性布局 LinearLayout排列方式(orientation) 有横竖两种方向的，水平和垂直在xml文件中:android:orientation="vertical" // 垂直排列android:orientation="horizontal" // 水平排列// 设置垂直排列// 设置水平排列这里需要注意：android:orientation="vertical"，子View使用layout_gravity在垂直方向上的设定无效。
Vue核心技术与实战--2023.7.4
weixin_65590235的博客
07-04 825
Vue+面经
Flutter-完整开发实战详解(一、Dart-语言和-Flutter-基础)
2401_85122662的博客
06-04 1168
var 可以定义变量，如 var tag = “666” ，这和 JS 、 Kotlin 等语言类似，同时 Dart 属于动态类型语言，支持闭包。Dart 中 number 类型分为 int 和 double ，其中 java 中的 long 对应的也是 Dart 中的 int 类型。Dart 中没有 float 类型。Dart 下只有 bool 型可以用于 if 等判断，不同于 JS 这种使用方式是不合法的 var g = “null”;if(g){}。
利用PS设计一个2.5D图标或者拟物化图标 ，psd文件
10-20
我们正在讨论Photoshop设计2.5D图标或拟物化图标的方法和资源，并获取对应的PSD文件。 根据用户的问题，我们需要提供设计方法和资源。注意，用户提到了两个风格：2.5D（等距投影）和拟物化（注重真实材质和光影）。...
使用Photoshop制作icon图标
FlyLikeButterfly的博客
03-02 1985
使用photoshop制作windows的icon图标
PS 制作.ICO 图标（VB6.0）
zanglaowei的专栏
12-05 2542
在Visual Basic 6.0中，对程序的图标，是有一定的要求的。具体如下：色深：256色尺寸：支持48 x 48（像素）或以下格式：ico（就是Windows下的图标格式）如果你的图标，没有满足这个上述条件，怎么办？照例，需要用到PhotoShop。默认情况下，PhotoShop是不支持.ico格式的，必须安装ico格式插件。文件名: ICOFormat.zip
轻松画图标！一分钟玩转PS路径描边
UI设计小站
03-17 1768
@Micu设计 ：Photoshop的路径工具和钢笔工具，很容易被人忽视，功能很强大，一直很低调。今天咱一块唠唠怎么用路径和钢笔，快速绘制简易线状图标，这个看了都能做噢！！！！哪怕是第一天学PS，也能做到。 有人说UI难学，摸不到门路，那就从这一课开始吧。 （心急的同学，直接翻到中下位置，教程部分即可，先练练手） 作者是个90后呦，关于他的奋斗故事与经验分享： 《这才是大学生活！90后
使用Ps制作ICON
li20020124的博客
04-08 1373
使用Ps制作ICON （作者：李文成，撰写时间：2019年4月7日） 软件：Adobe Photoshop CC 2018（PS）， 所用到的工具：钢笔工具、椭圆工具， 我们首先先看下成品。 第一步，使用椭圆工具绘制出一个正圆，描边颜色：#1e1e1e；描边大小：1px，填充颜色为：#f69e00，然后拷贝一份直接更改填充颜色，把大小调整好， 第二步，使用钢笔工具绘制出正圆里的图形调整好...
使用Ps制作icon
li20020124的博客
04-18 936
使用Ps制作icon （作者：李文成，撰写时间：2019年4月16日） 软件：Adobe Photoshop CC 2018（PS）， 所用到的工具：钢笔工具、圆角矩形工具、椭圆工具， 我们首先来看一下成品。 首先新建一个画板（ctrl+N）使用圆角矩形工具（U）半径为：60px；拖拉出一个圆角矩形，填充颜色为：#f68344；描边大小为：1px；颜色为：#050302；再使用直线工具（也可以使...
Photoshop制作icon展示
weixin_44570418的博客
04-08 1276
开发工具与关键技术：使用Photoshop制作icon展示 作者：成东平 撰写时间：2019年3月30日 制作icon展示，首先创建一张合适的空白纸张，然后用字体工具打上主题字“香蕉icon”然后选择“迷你简习字”的字体样式使用颜色为#8f970d。 主题字肯定不能显得怎么单调使用在该图层下加上一个椭圆，加上五的描边颜色使用#d2860c填充颜色使用#d2860c 在再椭圆空的位置放上一个香蕉...
Photoshop ICO插件：图标设计与批量处理扩展工具
weixin_36231030的博客
10-13 2451
本文还有配套的精品资源，点击获取 简介：Photoshop是图像处理和设计的专业软件，"Photoshop+ico插件"扩展了Photoshop的功能，使其能够直接处理和创建.ico图标文件。.ico文件是界面设计和网站开发的重要图像格式。本插件包括ICOFormat.8bi滤镜插件文件，提供对.ico格式的支持；GPL.html文件，包含开源许可证信息，允许自由使用、修改...
利用PhotoShop导出icon图标（*.ico,*.icon文件）
热门推荐
SH_思寒的博客
04-06 5万+
icon是一种图标格式，用于系统图标、软件图标等，这种图标扩展名为*.icon、*.ico。常见的软件或windows桌面上的那些图标一般都是ICON格式的。icon元素包括两个可选的子元素：small-icon子元素和large-icon子元素。文件名是Web应用归档文件(WAR)的根的相对路径。部署描述符并没有使用icon元素。但是，如果使用XML工具编辑部署描述符，XML编辑器可以使用ico...
用Photoshop进行icon的制作或将其它格式图片转成icon
qq_27474555的博客
04-07 9476
用Photoshop进行icon的制作或将其它格式图片转成icon 1、准备 (1)、安装的ps格式里没有ico，需要安装插件“ICOFormat.8bi”，搜索“ICOFormat.8bi”并根据PC选择下载； (2)、开始—>ps—>右击“属性”，在ps属性里点击打开“打开文件位置”,找到安装目录； (3)、在安装目录找到“plug-ins”“plug-ins”—>“File Formats”,把“ICOFormat64.8bi”或者“ICOFormat.8bi”拷贝到File For
antd-vue怎么应用icon图标
最新发布
11-28
<think> 根据用户当前的问题，用户想了解antd-vue应用icon图标的方法。结合提供的引用内容，引用[1]提到antd-mobile-icons项目为antd-mobile提供图标，但用户使用的是antd-vue，因此主要参考引用[2]中关于antd-vue树形表格修改展开图标的示例。 在引用[2]的代码中，展示了如何通过自定义expandIcon函数来更改树形表格的展开图标，使用了`<a-icon>`组件来渲染图标。这提示我们，在antd-vue中使用图标通常是通过`<a-icon>`组件，并指定其type属性为图标名称。 因此，我们可以总结出在antd-vue中使用图标的一般方法： 1. 引入图标组件（如果使用按需加载，可能需要单独引入图标组件） 2. 在模板中使用`<a-icon>`标签，并设置type属性为所需的图标名称。 另外，需要注意的是，antd-vue默认使用的是Ant Design的图标，如果用户需要更多图标，可能需要额外引入`@ant-design/icons-vue`包。 下面将分步骤说明如何应用图标： </think>在 antd-vue 中应用图标主要有以下几种方法，我将为您详细说明： ### 1. **使用内置图标（推荐）** antd-vue 内置了丰富的图标库，通过 `<a-icon>` 组件直接调用： ```vue <template> <!-- 基础用法 --> <a-icon type="home" /> <!-- 带样式的图标 --> <a-icon type="search" :style="{ fontSize: '24px', color: '#1890ff' }" /> <!-- 旋转图标 --> <a-icon type="loading" spin /> </template> <script> import { Icon } from 'ant-design-vue'; export default { components: { 'a-icon': Icon } } </script> ``` ### 2. **自定义图标（如修改表格展开图标）** 参考您提供的代码[^2]，可通过自定义渲染函数修改组件图标： ```vue <template> <a-table :expandIcon="expandIcon" ... /> </template> <script> export default { methods: { expandIcon(props) { if (props.record.children?.length) { return ( <a-icon type={props.expanded ? "caret-down" : "caret-right"} class="table-icon" onClick={e => props.onExpand(props.record, e)} /> ) } return <span style="display:inline-block; width:24px"></span> } } } </script> <style> .table-icon { margin-right: 7px; color: #87909f; transition: transform 0.3s; /* 添加动画效果 */ } </style> ``` ### 3. **使用第三方图标库** 如需要使用 antd-mobile-icons 或其他图标库： ```bash npm install @ant-design/icons-vue ``` ```vue <script> import { MobileOutlined, MailOutlined } from '@ant-design/icons-vue'; export default { components: { 'mobile-icon': MobileOutlined, 'mail-icon': MailOutlined } } </script> <template> <mobile-icon /> <mail-icon :style="{ color: 'red' }" /> </template> ``` ### 4. **SVG 图标引入** ```vue <template> <a-icon> <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024"> <path d="M864 64H160C107 64 64 107 64 160v..." /> </svg> </a-icon> </template> ``` ### 常见问题解决 1. **图标不显示**： - 检查是否注册组件：`components: { 'a-icon': Icon }` - 确认图标名称正确（[官方图标列表](https://www.antdv.com/components/icon-cn)） 2. **按需加载配置**（vite示例）： ```js // vite.config.js import Components from 'unplugin-vue-components/vite'; import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'; export default { plugins: [ Components({ resolvers: [AntDesignVueResolver()] }) ] } ``` > 提示：antd-vue@3.x 版本开始使用 `@ant-design/icons-vue` 作为独立图标包[^1]，需单独安装
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值