How to Edit Images with Online PS? Complete Beginner’s Tutorial

Learning to edit images professionally doesn’t require expensive software or years of training. Online PS tools like Photopea provide professional-grade photo editing capabilities directly in your browser, completely free. This comprehensive tutorial will guide you through everything you need to know to start editing images like a pro, even if you’ve never used photo editing software before.

Getting Started with Online PS

What is Online PS?

Online PS refers to web-based photo editing platforms that provide Photoshop-like functionality without installation. These tools run entirely in your browser, offering features such as:

• Layer-based editing
• Professional adjustment tools
• Filters and effects
• Text and shape tools
• Export in multiple formats

Opening Online PS

1. Navigate to an online PS platform (like Jiuyouyi Online PS)
2. Choose how to start:
   • Open image from your computer
   • Create new document from scratch
   • Open from URL
   • Import from cloud storage

Understanding the Interface

The online PS interface consists of:

Left toolbar: Contains all your tools

• Selection tools
• Paint and edit tools
• Vector and text tools
• Navigation tools

Center canvas: Where you edit your image

Right panels:

• Layers panel
• Adjustments panel
• History panel
• Properties panel

Top menu: File operations, filters, and image adjustments

Essential Tools Overview

Selection Tools

Marquee Tool (M):

• Draw rectangular or elliptical selections
• Hold Shift to constrain proportions
• Hold Alt/Option to subtract from selection

Lasso Tool (L):

• Freehand selection
• Polygonal lasso for straight edges
• Magnetic lasso follows edges automatically

Magic Wand (W):

• Select pixels of similar color
• Adjust tolerance for broader/narrower selection
• Click to select, Shift+click to add to selection

Paint and Edit Tools

Brush Tool (B):

• Paint with adjustable size and hardness
• Choose colors from the color picker
• Various brush presets available

Clone Stamp (S):

• Copy pixels from one area to another
• Alt/Option+click to sample source
• Paint over areas to clone

Eraser (E):

• Remove pixels to transparency
• Adjust size and hardness
• Works like a brush

Gradient (G):

• Create smooth color transitions
• Linear, radial, and angle options
• Custom gradient presets

Type and Shape Tools

Type Tool (T):

• Add text to your image
• Choose fonts, sizes, and colors
• Apply text effects and styles

Shape Tools (U):

• Draw rectangles, ellipses, and polygons
• Custom shapes available
• Fill and stroke options

Basic Image Editing Workflow

Step 1: Open Your Image

1. Click “File” > “Open”
2. Navigate to your image
3. Select and click “Open”
4. Your image appears on the canvas

Step 2: Basic Adjustments

Crop your image:

1. Select the Crop Tool (C)
2. Drag to define the crop area
3. Press Enter to apply

Adjust brightness and contrast:

1. Click “Image” > “Adjustments” > “Brightness/Contrast”
2. Move sliders to adjust
3. Click OK to apply

Color correction:

1. Click “Image” > “Adjustments” > “Color Balance”
2. Adjust shadows, midtones, and highlights
3. Click OK

Step 3: Save Your Work

For web use:

1. Click “File” > “Export As” > “PNG”
2. Adjust quality settings
3. Click “Save”

For future editing:

1. Click “File” > “Save as PSD”
2. Preserves all layers for later editing

Common Editing Tasks

Resizing Images

To resize an image:

1. Click “Image” > “Image Size”
2. Enter new dimensions
3. Choose resampling method (Bicubic for photos)
4. Click OK

Tips for resizing:

• Maintain aspect ratio to avoid distortion
• Downsize more than upscale for quality
• Use “Save for Web” for optimized file sizes

Adjusting Image Size

For specific dimensions:

1. Uncheck “Resample” to adjust resolution only
2. Check “Resample” to change pixel dimensions
3. 72 DPI for web, 300 DPI for print

Adding Text

To add text:

1. Select the Type Tool (T)
2. Click where you want text
3. Type your text
4. Use the options bar to customize:
   • Font family
   • Font size
   • Text color
   • Alignment

Text styling:

• Double-click text layer to edit
• Right-click layer > “Blending Options” for effects
• Add shadows, glows, and outlines

Removing Backgrounds

Quick selection method:

1. Select the Quick Selection Tool (W)
2. Paint over the subject
3. Click “Select” > “Inverse”
4. Press Delete to remove background

For complex backgrounds:

1. Use the Magic Wand to select background
2. Adjust tolerance as needed
3. Use “Select and Mask” for edge refinement
4. Delete selected background

Applying Filters

Online PS offers extensive filter options:

Blur filters:

• Gaussian Blur: Smooth, even blur
• Motion Blur: Directional blur effect
• Radial Blur: Zoom or spin effects

Sharpen filters:

• Unsharp Mask: Controlled sharpening
• Smart Sharpen: Advanced sharpening

Artistic filters:

• Oil Paint: Painterly effect
• Watercolor: Soft artistic look
• Stylize: Various creative effects

To apply filters:

1. Select the layer to apply filter
2. Click “Filter” menu
3. Choose filter category
4. Adjust settings in preview
5. Click OK

Working with Layers

Understanding Layers

Layers are like transparent sheets stacked on top of each other:

• Each layer can be edited independently
• Order matters (top layers cover lower ones)
• Layers can be hidden, locked, or grouped

Layer Operations

Create new layer:

• Click the new layer icon in Layers panel
• Or Layer > New > Layer

Duplicate layer:

• Right-click layer > Duplicate Layer
• Or drag layer to new layer icon

Delete layer:

• Select layer and click trash icon
• Or drag layer to trash icon

Layer styles:

1. Double-click layer (not the name)
2. Select effects (shadow, glow, etc.)
3. Adjust settings
4. Click OK

Advanced Techniques

Using Adjustment Layers

Adjustment layers apply edits non-destructively:

Add adjustment layer:

1. Click adjustment icon in Layers panel
2. Choose adjustment type (Curves, Levels, etc.)
3. Adjust in the Properties panel
4. Effects apply to all layers below

Benefits:

• Edit adjustments anytime
• Apply to specific layers with clipping masks
• Reduce with layer opacity
• Delete without affecting original image

Curves and Levels

Levels adjustment:

• Move black point to darken shadows
• Move white point to brighten highlights
• Move middle gray point for midtone adjustment

Curves adjustment:

• More precise tonal control
• Create S-curve for contrast
• Target specific tonal ranges
• Create custom contrast curves

Retouching Photos

Remove blemishes:

1. Select Spot Healing Brush (J)
2. Paint over blemishes
3. Tool automatically samples surrounding area

Smooth skin:

1. Duplicate layer
2. Apply surface blur to duplicate
3. Add layer mask
4. Paint skin areas to reveal smoothing

Brighten eyes:

1. Select Dodge Tool (O)
2. Set to Highlights, low exposure
3. Paint over eye whites carefully

Frequently Asked Questions

Is online PS really free to use?

Yes, tools like Photopea (Jiuyouyi Online PS) are completely free. Some display ads to support development, but all features are available without payment.

Can I open my existing photos?

Absolutely. Online PS tools open most image formats including JPG, PNG, GIF, WebP, and even PSD files from Photoshop.

Will my edits be saved automatically?

Most online PS tools don’t auto-save. Get in the habit of saving (Ctrl+S / Cmd+S) frequently, and save as PSD to preserve layers for future editing.

Can I undo mistakes?

Yes. Press Ctrl+Z / Cmd+Z to undo. Use the History panel to step back through multiple edits. History typically saves 50+ states.

How do I learn more advanced techniques?

Since online PS tools like Photopea match Photoshop’s interface, any Photoshop tutorial applies directly. Search for “Photoshop tutorial” plus your specific goal.

Can I use online PS on mobile devices?

Yes, Photopea and similar tools work on mobile browsers. The interface is optimized for desktop, but full functionality is available on tablets and phones.

What’s the maximum file size I can edit?

Most online PS tools handle files up to 100MB or more, depending on your browser’s memory. For very large files, consider using desktop software.

Can I collaborate with others?

Online PS tools are primarily single-user applications. For collaboration, save your work and share via cloud storage, or use collaboration-focused tools like Figma.

Conclusion

Online PS tools have made professional image editing accessible to everyone. With the skills covered in this tutorial, you’re ready to tackle common editing tasks from basic adjustments to advanced retouching.

The key to improving is practice. Start with simple edits on your own photos, gradually exploring more advanced features. Since online PS mirrors Photoshop’s tools and interface, you’re learning transferable skills that apply across professional photo editing.

Remember to save your work as PSD files while editing to preserve layers, then export as JPG or PNG for sharing and final use. With regular practice, you’ll quickly develop proficiency that transforms your images from snapshots into stunning photographs.

Start editing today and discover how powerful—and accessible—professional photo editing has become.

→ Try Jiuyouyi Online PS Now — Free Professional Photo Editing Tool