Writing in the front
Before writing two front-end picture related content (front-end PS cutting method, graphic details, CSS Sprite diagram production, use and related, graphic GIF), this article is for the front-end small white, collect and arrange some cutting skills, and related content.
About version:
Recommended pscc2017 version, some old version of many new functions do not have, will affect the efficiency. (Currently, 2017/4/11)
Basic setup
Adjust the layout of the work area first.
1. Select “Window” – open the “Info”, “Layers”, “History” and “Color” panels. The rest can be closed first.
2. After adjusting the panel, select “Window” – “Workspace” – “New Workspace”, save the current layout and name it, then it will appear the next time you open it, otherwise you will have to reset it every time you reopen Photoshop.
Ps: Even if someone else has messed up your panel, you can directly select the layout of your previously saved work from the “window” – “Workspace”.
Set the ruler coordinates
Operate the GIF:
There are a few other Settings:
File – New: Initialize the preset Settings 1920×2000, 72 resolution, 8 bit color map, background transparent color and save it. You can create a template
View/Display/smart guides and View/Character, both should be selected.
Ps interface has menu bar, property bar, toolbar, panel, workspace:
Measure and take color
What to measure? Label width, height, inside margin, border, positioning, text size, line height, background position, and so on, all need to be measured.
How to use it: Here is an example of a rectangular selection box. If you want to be more precise, you can use the ruler tool directly.
Width and height can be measured in two ways:
Method of scale measurement:
Color taking techniques:
QQ screenshot: screenshot when the mouse moved to where, there is an RGB below. (It is the same in PHOTOSHOP, the information bar will have the corresponding RGB when the mouse moves)
Pay attention to
Make the canvas as large as possible to reduce the error in our measurement.
PNG, JPG, GIF three different image formats:
The characteristics of the JPG
1, support photographic images or realistic images of advanced compression, and can use the compression ratio control image file size. 2. Lossy compression degrades image data quality and accumulates when editing and resaving JPG images. 3. JPG is not suitable for simpler images with very little color, large areas of similar color or significant brightness differences.
The characteristics of PNG
1, can ensure the most true as far as possible under the condition of compression image file size. 2. When PNG is used to store grayscale images, the depth of grayscale images can be as much as 16 bits, and when PNG is used to store color images, the depth of color images can be as much as 48 bits, and the α channel data can be as much as 16 bits. 3. Although PNG can be lossless compressed for more complex images requiring high fidelity, it is not suitable for Web pages due to its large image files.
When should PNG be used
PNG8 format is more suitable for storing images with the following conditions:
1. The image has less color and is mainly filled with solid color or smooth gradient color. 2. Simple images with large brightness differences and strong contrast (such as background and text in the Buy now button).
For realistic photographic images or images with very rich color levels, the best compression effect can be achieved by saving them in JPG format.
This article is written in great detail, if you are interested, please read it:PNG, JPG, GIF three different picture formats
shortcuts
1. Quickly select the layer with CTRL + right mouse button. 2
5. H, mouse move file, T text tool, I straw tool, move tool, press V at any time, you can return to the move tool
6. Export slices: Alt + Shift + CTRL + S (file – Save for Web format)
Trampling experience:
Automatic cut figure, – script – layer is saved as a file (before this time to pay attention to the save for web format file is saved all slices, rather than just the user section, or it will lead to always search filter layer, the along while have no reaction, and tan warning window, always point) means to save to save yourself the selected slice layer.
Shortcuts: zhidao.baidu.com/question/52…
The compressed image
Photoshopped images tend to be large files: here is a website with amazing compressed images (with walls, siege lions should be able to use the Internet scientifically) :
tinypng.com/
General site files directory
PSD cut map (project file directory) – admin (background) – static (resources) – CSS (all child file folders can be molecules, and convenient management, level too much is not recommended). Common CSS/reset CSS/yemian. CSS – images (can be) by themes page – js (predefined, Introduced, common.js) -font -pulgs – foreground page – other separate files
Reference:
To the front end of the small white cut map skills start front-end development (PhotoShop cut map) PNG, JPG, GIF three different picture formats
Finally: I hope the friends who have finished reading will like it and pay attention to me. At this stage, there will be no less than 15 articles per month (I will also share the dry goods when I see them). Code word is not easy, thank you for your support, thank you! Ps: Currently unemployed, coordinate Beijing, looking for a job recommendation. Then hope I write which aspects of the article can be under the comments, or private letter to me, although write bad, but I when this is a way to record their growth. (If I know how to do it, but if I don’t, I’ll write it down for later.) Nuggets personal homepage, Jane book homepage link, CSDN blog homepage link, Github.
The above. 2017.4.11