OnlinePS Tutorial - From Beginner to Advanced

A detailed online PS usage guide covering all core features. No prior experience needed — just follow the steps to master professional photo editing techniques.

Home / Tutorial

Table of Contents

1. Introduction & Setup

OnlinePS是一款完全免费的在线图片编辑器，也被称为ps在线版网页应用。它提供了接近桌面版Photoshop的核心功能，包括图层编辑、画笔绘制、滤镜效果、在线抠图、裁剪旋转、文字添加等。作为ps免费版在线使用工具，它最大的优势是无需下载安装，打开浏览器即可开始工作。

Browser Compatibility

OnlinePS is built on HTML5 Canvas technology. We recommend using the latest versions of the following browsers:

2. Importing Images

Before editing, you need to import images into the editor. OnlinePS provides the following import methods:

  1. Open from File Menu — Click "File" → "Open" in the top menu bar, then select image files in the file picker. Supports selecting multiple images for batch import.
  2. Drag & Drop — Drag image files directly from a folder or desktop onto the editor canvas, then release the mouse to complete the import. This is the fastest method.
  3. Paste Import — Images copied from other programs (such as browsers, QQ, WeChat) can be pasted directly into the editor with Ctrl+V.
  4. New Blank Canvas — Press Ctrl+N to create a blank canvas with custom dimensions and start drawing from scratch.
Tip: Supported image formats include: PNG, JPG, JPEG, GIF, BMP, WebP. We recommend importing images with moderate resolution (ideally no side exceeding 4000 pixels), as overly large images may cause lag.

3. Basic Editing: Crop & Rotate

Crop Image

  1. Select the "Crop" tool from the left toolbar (icon shows two overlapping right-angle frames)
  2. Drag the mouse on the image to draw the area you want to keep
  3. Drag the corner and edge control points to precisely adjust the selection size
  4. Double-click inside the selection or press Enter to confirm the crop
  5. If unsatisfied, press Ctrl+Z to undo

Rotate & Flip

  • Rotate 90°: Click menu Image → Rotate → Select clockwise or counterclockwise 90°
  • Free Rotation: After selecting the rotation tool, drag the image corner to rotate at any angle
  • Flip Horizontal: Image → Flip → Flip Horizontal (creates a mirror effect)
  • Flip Vertical: Image → Flip → Flip Vertical (inverts the image)

4. Brush & Drawing Tools

The brush is one of the most commonly used creative tools in OnlinePS. After selecting the brush icon from the left toolbar, you can adjust the following parameters in the right panel:

In addition to the standard brush, variants such as the pencil tool (hard edge), airbrush tool (gradient effect), and eraser tool (erase content) are also available.

5. Advanced Layer Management

Layers are a core concept in professional image editors. Think of each layer as a transparent film — multiple layers stacked together form the complete image. Key layer management operations include:

Pro Tip: Make it a habit to perform each operation on a new layer. This way, you can undo any step without affecting other parts, and easily adjust the front-to-back order of elements.

6. Filters & Color Adjustment

Filters can quickly give your images different artistic styles. Select "Filter" in the menu bar to see a rich set of options:

Common Filters

Color Adjustment

In addition to filters, fine color adjustment features are also available (usually under "Image" → "Adjustments" menu):

7. Adding Text & Typography

Adding text to images is a common need, such as creating watermarks, poster titles, social media captions, etc. Follow these steps:

  1. Select the "T"-shaped text tool from the left toolbar
  2. Click on the canvas where you want to add text
  3. Type the text content
  4. After selecting the text, modify font, size, color, bold, italic, and other properties in the right panel
  5. Drag the text box to move its position; drag the corners to scale and rotate
  6. Once confirmed, click another tool to finish adding
Tip: Text is automatically generated on a new layer, meaning you can double-click the text layer at any time to modify the content without damaging the original image.

8. Online Cutout Guide

Cutout is the process of extracting the subject from an image and removing the background. This is one of the most practical advanced features in OnlinePS. We have a dedicated Online Cutout Complete Guide; here is a brief overview of the basic process:

  1. Import the image you want to cut out
  2. Select an appropriate selection tool based on background complexity (Magic Wand / Lasso / Rectangle)
  3. After selecting the background area, press Delete to remove it
  4. Use the eraser and brush to refine edge details
  5. Export as PNG format to preserve the transparent background

For common scenarios like changing ID photo backgrounds, removing e-commerce product backgrounds, and portrait compositing, mastering cutout skills can save a lot of time.

9. Export & Format Options

After editing, you need to save your work locally. Click the "File" menu to see export options:

FormatFeaturesUse Cases
PNGLossless compression, supports transparency, larger file sizeFirst choice when transparent background is needed (e.g., cutout results, logos)
JPG/JPEGLossy compression, no transparency support, smaller file sizePhoto images, web sharing, reducing file size

Exported images will be saved to your computer's default download directory. Since all processing is done locally in the browser, please back up important work to a safe location promptly.

Keyboard Shortcuts

ShortcutFunctionShortcutFunction
Ctrl + ZUndoCtrl + YRedo
Ctrl + SSave ProjectCtrl + OOpen File
Ctrl + NNew CanvasCtrl + EExport Image
Ctrl + CCopyCtrl + VPaste
Ctrl + ASelect All on Current LayerDeleteDelete Selection
[Decrease Brush Size]Increase Brush Size
Ctrl + +Zoom InCtrl + -Zoom Out
Ctrl + 0Fit to WindowSpace+DragPan Canvas

Start Your First Edit Now!

Practice beats theory — open the editor and follow the tutorial step by step to get started quickly

Open OnlinePS

Related