Slicing Images in Photoshop

Slicing Images in Photoshop

Before writing any code, you need to extract the visual assets from the Photoshop design file. This process is called slicing — cutting out images, icons, and backgrounds so they can be used in your HTML and CSS.

What to Extract from a PSD

Look at the design and identify all the elements that need to be images:

• Logo — usually exported as a transparent PNG or SVG
• Hero/banner images — large background photos
• Icons — small graphics used throughout the design
• Content images — photos in cards, galleries, or articles
• Background patterns/textures — subtle repeating images

Method 1: Using the Slice Tool

1. Open your PSD file in Photoshop
2. Select the Slice Tool (shortcut: C, then cycle until you get the Slice Tool)
3. Draw rectangles around each image you want to export
4. Double-click each slice to name it (e.g., "logo", "hero-bg")
5. Go to File → Export → Save for Web (Legacy) or Alt+Shift+Ctrl+S
6. Select the format for each slice:
   • JPEG — for photographs (smaller file size)
   • PNG-24 — for images with transparency
   • PNG-8 — for simple graphics with few colors
7. Click Save → choose "Images Only" and "All Slices"

Method 2: Exporting Individual Layers

For more control, export layers individually:

1. In the Layers panel, find the layer or group you want
2. Right-click the layer → Quick Export as PNG
3. Or use File → Export → Export As for more options (format, size, quality)

Method 3: Generate Assets Automatically

1. Go to File → Generate → Image Assets (check to enable)
2. Rename layers with file extensions:
   • logo.png — exports as PNG
   • hero.jpg — exports as JPEG
   • 200% icon.png — exports at 2x resolution
3. Photoshop auto-generates the files in a folder next to the PSD

Choosing the Right Image Format

Format	Best For	Transparency	File Size
JPEG	Photos, gradients	No	Small
PNG-24	Logos, icons, screenshots	Yes	Medium–Large
PNG-8	Simple graphics, few colors	Limited	Small
SVG	Icons, logos, illustrations	Yes	Very small
WebP	Modern replacement for JPEG/PNG	Yes	Smallest

Extracting Design Information

Besides images, you also need to extract design specs for your CSS:

• Colors — use the Eyedropper Tool (I) and note hex codes
• Fonts — click on text layers and check the Character panel
• Sizes — use the Ruler or Info panel (F8) for dimensions and spacing
• Spacing — measure padding and margins between elements

Organizing Exported Assets

img/
├── logo.png
├── hero.jpg
├── icon-phone.png
├── icon-email.png
├── about-photo.jpg
├── service-1.jpg
├── service-2.jpg
├── service-3.jpg
└── bg-pattern.png

Image Optimization Tips

• Use JPEG quality 60-80% for web — it dramatically reduces file size with minimal visual difference
• Always export at the exact size you need (don't use a 3000px image for a 300px space)
• Use tools like TinyPNG or ImageOptim to further compress images
• Consider exporting at 2x resolution for Retina displays

Key Takeaways

• Slicing is the process of extracting images from a PSD for web use
• Use the Slice Tool, layer export, or auto-generate for different workflows
• Choose JPEG for photos, PNG for transparency, SVG for icons
• Always extract design specs (colors, fonts, sizes) alongside images
• Optimize images for the web to keep page load times fast