Shulou(Shulou.com)06/02 Report--

This article mainly explains "how web front-end engineers deal with photoshop design". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how web front-end engineers deal with photoshop design".

Photoshop usage

Most front-end engineers have had the experience of cutting pictures, that is, cut the designer's PSD and other format images into the required size of the project and realize the presentation of the page, then as a qualified front-end engineer, it is necessary for us to understand and skillfully master some functions of Photoshop. Here are a few practical Photoshop skills (take Adobe Photoshop CS5 as an example).

1. Resize the picture

If you find an image on the Internet or get an image from a designer for rendering on the web, but are not satisfied with the size of the image, you just need to adjust it using Photoshop. The steps are simple as follows:

(1) use Photoshop to open the picture and click "Image"-> Select "Image size"

(2) modify the width and height you want

Here we can generally modify the pixel size, if you do not check the "constraint scale" below, then the image may be pulled and deformed, which can prevent the imbalance of the width-height ratio, that is, zoom on the basis of the original image scale.

two。 Adjust local color

If we need to change the local color of the picture, for example, I want to change the background of the image below to black, we can click "Select"-> "Color range"-> Select background area-> adjust the color tolerance.

(1) selection range

(2) after clicking OK, fill the color

Of course, in addition to using the "color range", you can also use the "noose tool" or "selection tool" to create a selection, without introduction here, the establishment of a complex selection also requires a relatively complex operation.

3. One-click cut image

It should be said that cutting the picture is something that the front end often has to do. In the process of cutting the picture, if the layer is too complex and the picture is too small, we often need to enlarge the whole picture and hide the extra layers to select the graphics area we need, which is a waste of time and energy. Here we introduce how to achieve the effect of one-click image cutting through the action function of Photoshop.

(1) download action

Please click here to download the action file:

Http://note.youdao.com/yws/pu...

(2) load actions

Just load the action file you just downloaded.

(3) use actions

When the load is complete, open any psd file as follows:

a. First of all, we select "Mobile tool" and check "automatic selection".

b. Click the icon we want to cut, and we can see that the corresponding layer has been located in the layers panel.

c. Press F2 and the icon is successfully cut.

d. Press F3 to save to web format

There are many skills about Photoshop, just a few more commonly used for the front end of the three, as long as we are familiar with some practical techniques like this, we can save a lot of time and energy.

Use of tools and websites

1. Picture compression

If you want to compress an image, in addition to using Photoshop to modify the quality, we can also use some automation tools for compression, such as glup, grunt and so on.

When you do not have the above development environment and tools, I recommend a compressed image website at https://tinypng.com/.

It uses intelligent lossy compression technology, by selectively reducing the number of colors in the image, reducing the amount of data stored in bytes, the effect is almost invisible, but it can greatly reduce the size of the image.

Through the example of the official website, let's compare the changes of the two images before and after compression:

For the same image, the volume of the compressed image is nearly 1 to 4 less than that before compression, but the definition of the picture is still the same as that before compression.

two。 Icon download

Many times when there is a lack of design in our team or when the design is not there, if we need a logo or icon in the project, we can actually take care of it ourselves. Most of the pictures found through Baidu do not meet our needs. Here I recommend an easy-to-use icon library, easyicon, which has a large number of icon resources, and the address is: http://www.easyicon.net/

As shown in the following figure, we only need to enter the name of the icon we need to search for a large number of icons:

When we select the icon we need, a detailed download page appears. We can choose the icon format we need, such as PNG, ICO or ICONS, and we can also choose the icon size we need to download, as follows:

I believe that only this one website can meet your icon needs.

3. Font download

The font here mainly refers to the solid color font icon, now the icon icon of many websites are embedded in the form of font, so that we can to a certain extent reduce the number of requests for pictures on the page, but also easy to maintain. Here I recommend some popular font icon libraries:

(1) Alibaba Vector Icon Library: http://www.iconfont.cn/

Through this icon library of Taobao, we can easily manage and download the font icons we need, make and upload our icons, and collect the icons we like.

(2) icomoon icon library: https://icomoon.io/

This is a foreign website, also provides a series of font icon resources, also has the icon download collection and other functions, but some font icons need to charge.

(3) fontawesome icon library: http://fontawesome.io/

Fontawesome is an icon library loaded in the form of importing CSS files, which is suitable for the development of middle and background projects.

4. Template download

The template here can be PSD format files, can also be JPG and other picture format, generally many designers will look for materials and inspiration from these sites, so we can directly come over for reference and use, for our website prototyping is very helpful, of course, this is also in the lack of designers front-end can quickly achieve page design shortcuts.

(1) UI China: http://www.ui.cn/

(2) UE design platform: http://www.uehtml.com/

(3) UI maker: http://www.uimaker.com/

(4) Hiiishare: http://www.hiiishare.com/

(5) learn UI net: http://www.xueui.cn/

Library framework usage

The framework here mainly refers to the UI framework in front-end development. Reasonable use of UI framework can improve work efficiency and development costs while beautifying the page.

1. Suitable for PC end

(1) Bootstrap: http://www.bootcss.com/

Bootstrap can be regarded as one of the earliest popular front-end UI frameworks. After its introduction, it not only greatly facilitates the work of front-end developers, but also facilitates background developers to build front-end pages.

(2) flat-ui: http://www.bootcss.com/p/flat...

Flat-ui is a free WEB interface tool component library, its UI style is very flat, compared to Bootstrap it is more concise and compact.

(3) jQuery-ui: http://jqueryui.com/

JQuery-ui is the official UI library of jQuery, which not only improves CSS style beautification, but also provides a series of JS components for developers to use, but also supports custom functions.

two。 Suitable for mobile end

(1) Foundation: http://foundation.zurb.com/

Foundation is a small UI tool library that provides mobile priority for responsive layouts.

(2) Amazeui: http://amazeui.org/

Amazeui is the cross-screen front-end framework of open source HTML5 in China. Based on the concept of mobile priority, it gradually extends from a small screen to a large screen, and finally realizes all screen adaptation to adapt to the trend of mobile interconnection.

(3) MUI: http://dev.dcloud.net.cn/mui/

MUI is a high-performance front-end framework closest to the native APP experience, it does not rely on any third-party JS libraries, lightweight is its important feature.

3. Other

With the current upsurge of rich application frameworks, many front-end JS frameworks have their own UI framework choices, such as Vue's vux, vue-starp,React 's ant-design and so on. The birth of these frameworks can provide us with a fast one-stop front-end solution, making the front-end non-graphic design applications increasingly prosperous.

At this point, I believe you have a deeper understanding of "web front-end engineers how to deal with photoshop design". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.