PS Cut Notes

PS Cut

Cut out webpage material
from the design draft and provide image material for the webpage

Use PS tools

Edit> Preferences> Units and Rulers-Pixels
Panels Needed
Tools-Lists the tools provided by ps
Options-
Information-Displays color position and size information
Layer-Currently opened file layer
history-Records the current file All historical operations can refer back to any historical operation

tools
. Common tools for cutting pictures:

• Mobile tool
• Rectangular Marquee Tool
  • Add to selection: Hold Shift
  • Subtract from selection: hold Alt
  • Intersect with selection: hold down Shift+Alt
• Magic Wand Tool
• Crop tool + slicing tool
• Zoom tool
  • Zoom in: Ctrl+plus sign
  • Zoom out: Ctrl+minus sign
• Open under the "View" menu of the
  auxiliary view of the color picker
  :
• Align
• Ruler Ctrl+R
• Display>Reference Line Ctrl+;
  Measurement
  Rectangular Marquee Tool & Information Panel
• Width Height
• Inner border, outer border
• frame
• Positioning
• font size
• Row height
• Background image location

Pick color

• Border color
• Background color
• Letter color

Preparation for cutting the picture
Determine what needs to be cut out
Modification (usually used in the background attribute)

• Icon, logo
• Buttons, text, etc. with special effects
• The background of non-solid color is
  generally saved as PNG24 and PNG8
  content (usually used in the img tag)
• Banner, advertising image
• The picture of the article...
  Generally save it as JPG and
  cut the picture. The first step is to
  hide the text and only keep the background.
  If the text is a separate layer, hide the text layer
• Find the text layer
• Remove the glasses icon.
  If the text and background are merged, tile the background and overlay the text
• Rectangle selection tool
• Free transformation (Ctrl+T)
  Use the move tool+Alt to
  move horizontally while holding down shift

Cut picture
PNG24

• Move tool to select the desired layer (press and hold Crtl to select multiple)
• Right-click to merge layers (Ctrl+E)
• Then right click to copy the layer to a new file
  or directly drag it to an existing file (New: Ctrl+N)
  PNG8

Cut with background

• Combine (visible) layers (Shift+Ctrl+E)
• Rectangular marquee tool selection
• Magic wand tool to remove excess parts
  -subtract from the selection: hold down Alt

Tileable background cut image

• Use the rectangular marquee tool to select an area
• Copy and paste to a new file The
  tile content is filled with the width (x-axis) or height (y-axis) of the file

Slicing tool
for moving pages that can be cut across the board

• Pull reference line
• Select the slicing tool
• Click the "Slice based on reference line" button
• Save (select all slices, set the storage format uniformly)

Save
Store what you need

• Copy, create, paste
  Ctlr+C Ctrl+N Ctrl+V
  (drag the content to a new file)
  format selection
  When the picture is rich in color and does not require transparency, it is
  recommended to save it in JPG format and select the appropriate quality

When the color of the picture is not very rich,
please save it in PNG8 format regardless of whether there is a transparency requirement

When the image has translucency requirements
, please save it in PNG24 format

To ensure the quality of the picture,
keep a copy of the PSD and modify it on the PSD

Picture modification and maintenance

Change the canvas size
Image-canvas size-
(positioning needs to be selected in the upper left corner)
reduce the canvas to the specified area
Selected area-crop
moving icon

• If the icon is an independent icon, just drag it with the moving tool
• If the icon is a non-independent layer
  • Use the selection tool to select the icon area
  • Drag the icon with the move tool

Modify the picture of PNG8, you
need to change the color mode to: PGB color

Use background image

HTML
<button class="u-btn">1</button>

CSS
.u-btn{
    
    background:url(images/btn.png)no=repeat 0 0;}

Picture merging scheme

Sprite puzzle
Benefits: reduce network requests, improve web page loading speed,
size and quality
merged
pictures, must keep gaps between them
Arrangement
horizontal and vertical

Merge-category

• Combine pictures belonging to the same module
• Combine pictures of similar size
• Combine pictures with similar colors
• Combining the above methods
  recommended
• Only the pictures used on this page are merged
• Stateful icon merging

Browser compatible

IE6 does not support PNG24 semi-transparent
CSS3 & cut images