Web前端基础(一):PhotoShop与图片认知

2024-08-26 20:48

本文主要是介绍Web前端基础(一):PhotoShop与图片认知,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

本文包含对前端开发中页面重构的理解、常用图片格式的认知、开发过程中图片选择、简要的PS技术等。

1、页面重构

就是“将美工图转换成html代码在WEB页面显示出来”,这一过程可以直接把PSD从PS里导出成网页;也可复杂到需要考虑页面中每个标签的使用,考虑“页面性能”。

  • 对于靠谱美工,美工图精确度约0px。
  • 对于不靠谱的美工,要与产品经理沟通,并用邮件往来。

工作内容一般是“分析美工图——切图——写HTML和CSS”

  • 问:页面重构和前端的关系?
  • 答:页面重构是前端工作细化的结果。

2、Web常用的图片格式

1、gif是Web 上最常用的图像格式,它可以用来存储各种图像文件。

  • gif广泛支持Internet标准,支持无损耗压缩和透明度,支持动画。但同时,gif格式不适合高清晰度图片,也不支持半透明显示。

2、jpg 是Web 上仅次于GIF 的常用图像格式。jpg 是一种压缩得非常紧凑的格式,专门用于不含大色块的图像。

  • 对于前端,首先要知道的是jpg格式的图片完全不支持任何透明的显示,因此当图片有透明度的要求的时候,可以先放弃jpg格式。
  • jpg支持最高程度的压缩,当需要没有透明要求的大图时,可以尝试保存成jpg格式,适当的压缩到人眼舒适的程度。

3、png 格式是Web 图像中最通用的格式,它是一种无损压缩格式。

  • png格式支持半透明显示,同时还支持真彩和灰度级图像的Alpha通道透明度,并能获得高的压缩比而不损失数据。

三者区别:

动画:

  • gif支持动画,jpg、png都不支持动画

透明:

  • png支持半透明和全透明,gif支持全透明,
  • gif不支持半透明,jpg全透明和半透明都不支持

文件大小:

  • jpg的压缩率较大

兼容性:

  • IE6浏览器不支持png-24的透明,如果没有动画,一般选择存储为png-8格式的图片
  • png-8支持全透明,不支持半透明和动画;图片色彩程度比gif高; 一位透明通道
  • png-24具有支持全透明的性质;8位透明通道;

3、网页开发过程中,什么是数据图,什么是背景图

网页中一直不变的图叫做背景图(icon);如淘宝购物车的图标。需要把图切下来保存起来。
网页中可能会改变的叫做数据图;如淘宝的滚动信息展示。此类图来源于后台服务器,不需要切图。

三基色:红 绿 蓝

  • 红+绿=黄;绿+蓝=青;红+蓝=紫;
  • 颜色描述:颜色值,亮度(深浅度);
  • 表示颜色:十六进制的算法;R G B的形式

4、熟悉Photoshop的界面和工具

图片保存:存储—ctrl+s 存储为—ctrl+shift+s 存储为web格式—ctrl+shift+alt+s
F8:信息面板
ctrl+n: 新建
ctrl+o: 打开
alt+delete:填充前景色
ctrl+delete:填充背景色
ctrl+d:取消选区
ctrl+; :取消参考线
ctrl+r:标尺——可以从标尺上直接脱出参考线,删除参考线只要选取它甩到标尺上。

测量:

  • 打开显示中的智能参考线,然后用矩形框工具选好整个要测量的地方,然后可以右键选择变换选区进行调整选区。
  • 如果矩形框工具起点不对,可以按住空格键,直接进行拖放。

查看字体:

  • 选择横排文字工具,放到文字中去,然后选择窗口中的字符,查看字符面板。取消文字选择:ctrl+回车。
  • 误删可以从窗口打开历史记录中进行还原。

5、PhotoShop基础组成

  • 1、基本的选区工具、裁剪工具、切片工具、选择工具
  • 2、理解像素、透明度的概念
    • 像素:指一幅点阵图像里的最小组成单位,像素不能再被划分为更小的单位。在一般情况下,它是一块正方形,带有颜色、明暗、相对于整个图像的坐标

这篇关于Web前端基础(一):PhotoShop与图片认知的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1109643

相关文章

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

利用Python脚本实现批量将图片转换为WebP格式

《利用Python脚本实现批量将图片转换为WebP格式》Python语言的简洁语法和库支持使其成为图像处理的理想选择,本文将介绍如何利用Python实现批量将图片转换为WebP格式的脚本,WebP作为... 目录简介1. python在图像处理中的应用2. WebP格式的原理和优势2.1 WebP格式与传统

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

如何使用Maven创建web目录结构

《如何使用Maven创建web目录结构》:本文主要介绍如何使用Maven创建web目录结构的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录创建web工程第一步第二步第三步第四步第五步第六步第七步总结创建web工程第一步js通过Maven骨架创pytho

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

如何使用Haporxy搭建Web群集

《如何使用Haporxy搭建Web群集》Haproxy是目前比较流行的一种群集调度工具,同类群集调度工具有很多如LVS和Nginx,本案例介绍使用Haproxy及Nginx搭建一套Web群集,感兴趣的... 目录一、案例分析1.案例概述2.案例前置知识点2.1 HTTP请求2.2 负载均衡常用调度算法 2.