Slicing Images in Photoshop

Slicing Images in Photoshop

The first practical step in our PSD to WordPress workflow is to extract all the visual assets from the Photoshop design file. This process is called slicing.

What to Look For in the PSD

Open the PSD file and identify every element that needs to be an image:

• Logo — export as transparent PNG (or SVG if available)
• Hero/banner images — large background photographs
• Content images — photos for cards, about section, galleries
• Icons — small graphics (phone, email, social media)
• Background patterns — subtle repeating textures
• Decorative elements — shapes, lines, overlays

Extracting Design Specifications

Besides images, you need to note down the CSS values from the PSD:

Specification	How to Extract	Photoshop Tool
Colors	Click on colored areas	Eyedropper Tool (I)
Fonts	Click on text layers	Character Panel
Font sizes	Select text layers	Character Panel → Size field
Dimensions	Select elements/layers	Info Panel (F8)
Spacing	Measure between elements	Ruler Tool or Marquee

Slicing Methods

Method 1: Slice Tool

1. Select the Slice Tool (C, cycle through crop tools)
2. Draw a rectangle around each image to export
3. Double-click each slice to name it (e.g., logo, hero-bg)
4. Go to File → Export → Save for Web (Legacy) (Alt+Shift+Ctrl+S)
5. Choose format per slice: JPEG for photos, PNG-24 for transparency
6. Click Save → choose Images Only, All Slices

Method 2: Layer Export

1. In the Layers panel, find the layer you need
2. Right-click → Quick Export as PNG
3. Or use File → Export → Export As for format/size control

Method 3: Generate Image Assets

1. Enable: File → Generate → Image Assets
2. Rename layers with extensions: logo.png, hero.jpg
3. Files auto-generate next to the PSD file

Image Format Guide

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

Organizing Your Assets

project/
├── index.html
├── css/
│   └── styles.css
├── img/
│   ├── logo.png
│   ├── hero.jpg
│   ├── about.jpg
│   ├── service-1.jpg
│   ├── service-2.jpg
│   ├── service-3.jpg
│   ├── icon-phone.png
│   ├── icon-email.png
│   └── bg-pattern.png
└── js/
    └── script.js

Optimization Tips

• Use JPEG quality 60–80% — minimal visual difference, major size savings
• Export at the exact size needed — don't use oversized images
• Run images through TinyPNG or ImageOptim for further compression
• Consider 2× exports for Retina/HiDPI displays

Key Takeaways

• Slicing is the process of extracting images from the PSD for web use
• Extract design specs (colors, fonts, sizes, spacing) alongside images
• Use JPEG for photos, PNG for transparency, SVG for icons when possible
• Organize assets in a clean folder structure
• Optimize images before using them in your project