Several shortcut keys and summary of Web transduction

Freedom of Control View series

• Free browse Pictures: Press and hold the space, drag the mouse
• Free zoom Picture: Hold ALT + scroll wheel
• Switch to actual pixel (100%): Ctrl + 1
• Workspace type Toggle: Tab

Control Content Series

• Select a layer by clicking on the screen: Alt + right mouse button
• Drag a layer on the screen: V switch to move mode mouse drag
• Copy drag a layer: Move mode ALT + drag
• Delete a layer: Select the layer you want to delete press DELETE
• Merge multiple layers: Select the layers you want to merge press Ctrl+e
• Fill color in selection: Alt+delete (foreground) ctrl+delete (background color)
• Scale the current selection layer: ctrl+t (free transform mode)

Practical Tools Series

• Draw a selection: Click M to enter the selection mode, drag the mouse to draw
• Discard selection: Ctrl+d
Eyedropper tool: Click I to enter the eyedropper mode, click the screen color
• Type tool: Click T to enter text mode, click on the text of the screen or create a new text
• Slice tool: Click c to enter the slice mode (the old version will be different)

• Quickly hide other layers: Alt + small eyes

• Ctr+r Ruler

Analysis of the ideas before transduction

Take the PSD, the first should be analyzed, at the transduction level, the main analysis of three points which pictures are separate, such as logo and banner part

Which images need to be tiled, such as the background of the navigation section *

Which pictures are required for CSS Sprite
For example, some icon icons in front of the list

The format of the picture
The logo is uniformly cut into png transparency (PNG is used for less color)

See the transparency situation using Png8 or png24

In general, the temporary figure
, ad
, Banner
Figure in JPG format, color-rich, large image cut into jpg

The color is used PNG, with PNG8 or png24 need to see the picture concrete transparent bottom situation, translucent cut into Png24

The smaller the picture, the better the image quality is guaranteed.

Small-sized, thinly colored and transparent in GIF or PNG8.

(Note: IE6 does not support PNG24 transparency picture, need to do compatible processing or cut into PNG8)
*"difference between PNG-8 and PNG-24" Png8 has a 1-bit Boolean transparent channel (either completely transparent or completely opaque), andPng24 has a 8-bit (256-order) Boolean transparent channel (so-called translucent) **

There are some similarities between png-8 and gif , which are indexed colors, support only pixel-level pure transparency, and do not support Alpha transparency.

(Note: We generally say that "IE6 does not support PNG transparency"means that PNG-24 is not supported for transparency.) But the IE6 supports PNG-8 transparency, just like the transparency of GIF support)
Some tips for transduction
CTRL + N
Create a new transparent background layer (the size of the layer depends on the scale, which is larger than the cropped layer).

Shift
+ left mouse button click Layer to select multiple layers to operate

Ctrl
+ left mouse button Select the layer you want to crop move to the new transparent background layer in step 1th and press Ctrl+shift+e
To merge visual layers.

Ctrl
+ left mouse button click on the selection view on the right layer bar, select the layer selection you want to crop, then press the shortcut key [alt+i+r
(cut) or alt+i+p
(crop)] to crop

Ctrl+shift+alt+s after cropping is complete
Be saved as a Web-available format .

Several shortcut keys and summary of Web transduction