PhotoShop skills necessary for web front-end

PhotoShop skills necessary for web front-end

1. Introduction and installation of PhotoShop

Adobe PhotoShop, referred to as "PS", is an image processing software developed and distributed by Adobe Systems.

PhotoShop mainly deals with digital images composed of pixels. Using its numerous editing and drawing tools, you can effectively edit and create pictures. PS has many functions, involving in image, graphics, text, video, publishing and other aspects.

1.1 Install PhotoShop

For the installation of PS, you can refer to this official account article PhotoShop 2020 installation tutorial .

1.2 Interface introduction of PhotoShop

The functions of each area are introduced as follows:

• Menu bar : perform operations such as file import and export, interface settings, etc.

• Property bar : When we select text, pick up color or measure size with a ruler, observe the corresponding information in this bar.

• Toolbar : Select the corresponding tool for related operations.

• Workspace : Perform corresponding operations on the psd file.

• Plug-in area : Plug-in management and use, files can be imported to online platforms such as Blue Lake.

• Panel area : for color selection and color setting operations.

• Layer management area : perform layer-related operations, such as hiding layers, unlocking layers, copying layers, and so on.

Our commonly used front-end tools are shown in the figure:

There is a small triangle in the lower right corner of each tool icon, indicating that it is a tool class. You can use the right mouse button to click the icon to switch tools .

We can also click the three dot icons at the bottom of the toolbar to set the tool category , and change the arrangement order and tool category division of the toolbar .

1.3 Initial settings of PhotoShop

1. Call up the ruler tool

   • Call out the ruler tool: Menu bar > View > Ruler (shortcut key: [Ctrl + R])

2. The unit is set to px,

   • Convert the unit cm to px: Menu Bar > Edit > Preferences > Units and Rulers (shortcut key: [Ctrl + K])

3. use guides

   • Add reference line: Use the left mouse button to pull out an auxiliary line from the ruler.
   • Delete reference line: Use the left mouse button to pull the auxiliary line back to the ruler.
   • Clear all guides: Menu bar > View > Clear Guides

With the help of the guideline, use the ruler tool to measure the size of the picture, select the tool as the move tool, and pull the guideline at the ruler end.

2. Commonly used shortcut keys

2.1 Shortcut keys for basic operations

• Copy - [Ctrl + C]
• New - [Ctrl + N]
• Paste - [Ctrl + V]
• Undo - [Ctrl + Z]
• Cancel - [Ctrl + D]

2.2 Shortcut keys for tool selection

• Mobile Tools - 【V】
• Slice tool - 【C】
• Eyedropper tool - 【I】
• Text Tool - 【T】
• Zoom Tool - [Alt + Scroll Wheel]
• Hand Tool (Move View) - [H or Spacebar]

2.3 Operations related to image storage

• Save as web format [Alt + Shift + Ctrl + S]
• Direct export in the new version: [Alt + Shift + Ctrl + W]

3. Slicing (emphasis)

Slicing is a very important step in the process of webpage production. Often the correctness of slicing will affect the post-production of webpages. Generally, PS or fw is used to segment the renderings or large pictures of webpages.

Important and correct slices can bring some very positive effects to the website, such as reducing page load time, making dynamic effects, optimizing images, links, etc.

Each slice is stored as a separate file with its own settings, color palette, links, flip effects, and animation effects.

The slicing tool is mainly used to decompose a large picture into several small pictures. This function is often used in web pages, because the current web pages are full of pictures and texts, and it takes a long time to open a web page. people waited too long, so they cut the picture into several smaller ones to compose.

3.1 Slicing specific operation process

1. Open ([Ctrl + O]) psd file or jpg file

2. Save as ([Ctrl + Shift + S]) new psd file

   • Operate immediately on the new psd file without destroying the source file;

3. Open guideline ([Ctrl + R])

   • Pull the auxiliary line and select the position to be sliced;

4. Use the slice tool ([C])

   • Just install the auxiliary line and slice it.

5. Export slices ([Ctrl + Shift + Alt + S]), select the image storage format

3.2 Storage slices

1. Adjustment type: mouse to select each slice and set it.

2. Adjust the export type: select the user's slice, otherwise the others will be exported as well.

3. View the results and change the name (the name should not contain Chinese and special symbols)

4. Clear Slices: During use or after completion, if you want to clear all slices (menu bar > View > Clear Slices)

3.3 Differences in image storage formats

The image storage format is generally jpg, png-24, png-8, gif four, the differences are as follows:

1. gif is similar to png-8: it supports full transparency, does not support translucency, and will have rough edges.

   • gif can be stored as a moving picture, but png-8 does not support it.
   • The size of the gif is relatively large, and when the quality is guaranteed, the smaller the size, the one you choose.

2. jpg: commonly used format, large and clear, the navigation map in general web pages is jpg, visual impact.

3. PNG-24: It is very good to support transparency. Generally, PNG-24 is used to support transparency in web pages.

Conclusion :

• Rich colors and excessive use of jpg format for export (most of the pictures on the webpage are jpg)
• The background is transparent and exported in png format
• If the color is single, too few, or there are animations, use gif format to export (disadvantages such as irregular circles have jaggedness, try to use gif as little as possible)

3.4 Techniques for slicing

• shadow :
  • It can be implemented using css3, but it has the defect of not supporting IE 678
  • So use the slice directly, pay attention to hide the background
  • Export as a png-24 image, check <transparency> when exporting
• Gradient :
  • Top to Bottom -> Slice Width 1, Left to Right -> Slice Height 1
  • Export as a png-24 image, check <transparency> when exporting
• Irregular pictures :
  • Pay attention to hide the background, export it as a png-24 image, and check <transparency> when exporting

4. Common usage scenarios

4.1 Remove the background color (make the background transparent)

1. Open the picture to be changed with PS

2. Select the layer --> double-click to create a new layer (unlock)

3. Drag the layer --> create a new layer (backup)

4. Hide the original layer (click on the eye) –> select the upper layer

5. Use the magic wand tool (【W】) --> need to add one by one (【Shift】) to select

6. Select all background colors to be deleted --> Delete (【Del】)

7. Deselect ([Ctrl + D]) the background area

8. Just save it as a .png image

4.2 Change picture size

4.3 Remove website watermark

epilogue

This is the best answer in the knowledge I know so far, and of course there may be some misunderstandings.

So if you have doubts about this article, you can leave a message in the comment area, and I will reply in time. You are welcome to point out the wrong views in the article.

In the end, the code words are not easy, and friends who find it helpful will like, bookmark, and follow along.