初级前端工程师的养成之路

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录


前言

提示:这里可以添加本文要记录的大概内容:

随着近些年来IT行业的蓬勃发展,人才需求越来越大,伴随着高工资,好福利,进入这一行业的人也日益增加,越来越收到人们的追捧。

但是同时也面临着一个问题。我们都知道,每个行业有每个行业的规则与门槛,或是学历,或是技术,或是人脉。如何踏过这一门槛,顺利进入这一行业,成了很多人的一个问题,也让很多人望而止步,在没有一个很好的学历的情况下,学好一门技术,也是可以让你在这一现代社会有一立足之地。

就拿我来说,专科学历,在学校浑浑噩噩度过三年,也没有学到什么真正有用的东西,想要找到一份好工作,自然也是很困难的,于是在一个星期前,拿着家里给的一万块钱,报了一个前端培训班,

从今天起,我将会每周发布我在机构学习的东西,在帮助自己巩固知识点的同时,也希望可以帮助到哪些自学前端但无从下手的小白,下面我就按照机构教学的顺序回顾一下这一周所学到的东西。


一、学习安排

前端,顾名思义也就是网页设计,大致可分为四个阶段:

  1. Photoshop+HTML+CSS基础样式——制作简单网页
  2. CSS进阶——制作复杂网页
  3. HTML5+CSS3+企业级框架(SASS+Bootstrap)
  4. 项目

二、Photoshop

​​​​Photoshiop是Adobe公司开发的一款图像处理软件,主要是以像素味为单位。因为我们主要是网页设计,图片只是辅助我们进行网页编写,所以PS不需要精通,会简单的使用即可。

  • 安装PS软件

PS有很多版本,大家可以根据自己的需要,到PS官网上选择一个版本下载,官网上许多版本的功能是收费的,不便于我们日后的操作,但是大家懂得,国外很多收费的软件,到了我们中国,都会有破解版的(哈哈哈),这里我就放一个机构给我们的2018版本的破解版

  • 设置好参数

编辑-首选项-单位与标尺----修改创建画布的尺寸单位为像素

  •  新建画布

可以根据自己的需求设置画布的宽度和高度,可以看到由于我们刚刚设置了单位,这里就默认单位为像素,分辨率选择72,RGB颜色,8位,特别注意,背景内容最好是选择为透明。

 这里有几个名词,解释一下:

  • 宽度和高度(是以像素为单位)
  • 分辨率:图像的清晰程度,分辨率越高,图像越清晰

72:电脑和手机平板等使用的图片的分辨率

150:大型喷绘产品

300:印刷产品

  • 颜色模式       

RGB:是以红(red)、绿(green)、蓝(blue)为基础色,进行不同饱和度混合形成不同的颜色,每种颜色取值范围:0~255;全为0是黑色,全为255是白色

CMYK:印刷用色

灰度:是以黑色为基础色,以不同饱和度的黑色来显示图像

位图:黑白图像,图像中只有黑色和白色构成

如果创建好之后,发现参数选择有误,可以在图像-模式里面修改


三、图层介绍

将需要设计的图片直接拖拽到PS上即可编辑图片,图片是由多个模块组成的,每个模块就是一个图层,由多个图层组成最终构成的图像效果

  • 特点:上方图层会遮盖住下方的图层,透明的图层可以看到下方图层的效果
  • 新建图层:点击下方的创建新图层即可
  • 拷贝图层:ctrl+C复制图层,ctrl+v 或 鼠标左键拖拽图层到创建新图层的图标上或选中图层ctrl+j
  • 删除图层:鼠标左键拖拽图层到删除图层的图标上 或 选中图层鼠标左键点击删除图层图标 或者 delete
  • 载入选区:ctrl+鼠标左键点击缩略图
  • 取消选区:ctrl+D

例右下方红色框图标:

如果想要打开多个文件或图片的:可以多个文件直接拖拽进窗口栏,新开窗口进行显示即可。


四、各种功能的使用

  • 套索工具

主要用于抠图,

套索工具-可以绘制不规则的选区

多边形套索工具-可以自动识别对象的边缘,形成锚点和连线的选区

快捷键:

删除所有锚点:esc

删除上一个锚点:delete

放大:ctrl+加号键;缩小:ctrl+减号键

抠图时,可以把图片放大进行选区,可以抠图的效果更佳

  • 选区工具

 移动工具:可以移动图层中图像的显示位置,最上方自动选择

自动选择是否勾选:如果勾选时可以自动定位到鼠标点击的图像所在图层,如果不勾选时,可以按住ctrl键进行自动切换到勾选状态

标尺工具:ctrl+R

选区默认不叠加,会重新创建新的选区

选区可以进行加、减、交:

  • 加:按住shift键将新选区添加到已有选区中
  • 减:按住alt键将新选区从已有选区中减掉
  • 交:按住alt+shift键选择新选区和已有选区重叠区域

选区的移动:在选区选中时,鼠标移入选区中进行鼠标左键点击拖拽

载入选区:选中图层,ctrl+点击图层缩略图

取消选区:ctrl+D

选区反选:选中选区鼠标右键——选择反向 或者 ctrl+shift+i

编辑选区:alt+s+t ,移动到定界框上可以缩放选区,移动定界框中可以移动选区,移动到定界框外可以旋转选区(按照shift可以以15°角进行旋转)

注意:

  • 绘制选区时按住shift键,可以绘制正圆或者正方形
  • 在绘制过程中(鼠标左键按住不放时),可以按住空格键进行选区的移动

  • 魔棒工具

魔棒和快速选择工具

调整画笔:alt+鼠标右键 左右可以调整大小,上下调整硬度

  1. 快速选择工具

    主要用于根据选中的区域的颜色来决定选取的范围

    颜色色差较大,选取的范围更加精准

  2. 魔棒工具

    将相同的颜色建立选区,可以通过容差值来调整选取的范围

    容差:指颜色区分程度,容差值越大,选择范围越广

    连续是否勾选:勾选时,选择的区域是连接在一起的。

 在选区工具中,建立选区后,可以使用”选择并遮住”调整选区的边缘,使图像的边缘更加圆滑

  • 印章工具

主要用于去掉图片中的水印

仿制图章工具:

画笔大小的调整:alt+鼠标右键 左右是大小,上下是硬度

  • 按住alt进行取样,然后点击鼠标左键进行绘制(去水印)
  • 以周边近似色进行取样,用于去水印

对齐是否勾选:勾选时默认以取样点为参考进行绘制,不勾选时,每次点击鼠标左键都是取样点的效果

  • 钢笔工具

可以用来绘制带有曲线等不规则的图案

绘制图形时,使用路径进行绘制,绘制完成之后,使用ctrl+enter转为选区

新建锚点:鼠标左键点击画布

绘制曲线:鼠标左键新建锚点时,按住不放进行拖拽可以绘制曲线,如果新建锚点完成之后,可以使用转换点工具点击对应的锚点进行拖拽,也可以绘制曲线

控制操纵杆:绘制过程中,可以按住alt键选中对应操纵杆进行拖拽,绘制完成之后,可以使用转换点工具控制对应的操纵杆进行拖拽

取消半边操纵杆:在绘制过程中,按住alt键点击对应的锚点(取消后边的操纵杆)

取消两边操纵杆:使用转换点工具点击对应的锚点

添加锚点和删除锚点

注意:当路径转为选区后,不能调整形状。


五、总结


好了,以上就是今天要讲的内容,本文仅仅简单介绍了Photoshop的简单使用,希望可以帮助到有需要的码农们。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值