First Screenshot

🎯 Preparation

Ensure Extension is Installed

If you haven't installed it yet, please check the Installation Guide.

Choose Target Webpage

Let's select a visually rich webpage for practice:

• News websites: Like BBC News, CNN
• Product pages: Like Apple product introduction pages
• Blog articles: Technical blogs or personal blogs
• Your portfolio: If you have a personal website

💡 Tip: Choose a website you visit frequently, making it easier to compare screenshot results.

📸 Scenario 1: Capture Current Page (Simplest)

Let's use a code hosting platform as an example:

Step 1: Open Webpage

https://example.com/your-project

Step 2: Adjust Window

• Maximize browser window
• Ensure content is fully displayed
• Scroll to appropriate position

Step 3: Start Screenshot

1. Click extension icon 📸
2. Select "Visible Area" mode
3. Click "Start Screenshot"

💡 Tip: Click the extension icon in the browser toolbar, select screenshot mode to begin.

Step 4: View Results

• Screenshot automatically downloads to Downloads folder
• Filename format: screenshot_YYYYMMDD_HHMMSS.png
• View screenshot quality in browser

📄 Scenario 2: Capture Long Article

Let's use a Medium article as an example:

Step 1: Select Long Content

https://medium.com/topic/technology

Step 2: Prepare Full Page Screenshot

1. Scroll to bottom to confirm content length
2. Return to top to start screenshot from page beginning
3. Wait for page to fully load, including images and videos

Step 3: Use Full Page Mode

1. Select "Full Page" mode
2. Click "Start Screenshot"
3. Observe scrolling process
   • Extension automatically scrolls down
   • Real-time capture progress display
   • Stitch multiple screenshots

Step 4: Process Results

• Wait for stitching to complete
• Check stitching quality
• Save or share

🎯 Scenario 3: Precise Element Capture

Let's capture specific elements on the webpage:

Step 1: Identify Target Elements

• Navigation bar: Website main navigation
• Product images: Product showcase images
• Article titles: Blog article title areas
• Buttons: CTA buttons or function buttons

Step 2: Element Selection Mode

1. Select "Element Selection" mode
2. Move mouse to target element
   • Element will be highlighted
   • Element size information displayed
   • Element type shown (div, img, button, etc.)

💡 Tip: When hovering over selectable elements, you'll see blue highlight effects and element information tooltips.

Step 3: Precise Selection

1. Click target element
2. Adjust selection range
   • Drag edges to adjust size
   • Move selection box position
3. Confirm selection

Step 4: Optimize Results

• Check if complete content is included
• Adjust margins and spacing
• Save final screenshot

📐 Scenario 4: Custom Area

When you only need to capture a specific part of the page:

Step 1: Determine Area

• Identify content range to capture
• Estimate required dimensions
• Consider aspect ratio

Step 2: Area Selection

1. Select "Area Selection" mode
2. Hold left mouse button
3. Drag to create selection
   • Real-time size display
   • Aspect ratio display
   • Alignment guides

💡 Tip: When dragging, you'll see selection border and size hints, and can use keyboard arrow keys for fine-tuning.

Step 3: Precise Adjustment

1. Drag borders to adjust size
2. Move selection to appropriate position
3. Use keyboard fine-tuning
   • Arrow keys: Move 1px
   • Shift + Arrow keys: Move 10px

Step 4: Confirm Screenshot

• Double-click selection or press Enter
• Click confirm button
• Preview final effect

💾 Save and Manage

Local Save

1. Select Format

   • PNG: High quality, supports transparent background
   • JPG: High compression, suitable for web
   • PDF: Document format, supports multiple pages

2. Select Location

   • Default download folder
   • Custom folder
   • Desktop shortcut

3. Naming Rules

   • Auto-naming: Timestamp
   • Custom name: Meaningful name

Local Folder Management

建议按照用途创建简单的文件夹结构：

Recommend creating a simple folder structure by purpose:

📁 Screenshots/
├── 📁 Work/              # Work-related screenshots
├── 📁 Personal/          # Personal life screenshots
├── 📁 Reference/         # Reference materials
└── 📁 Archive/           # Archive files

🔍 Quality Check

Checklist

After taking screenshots, please check:

• Completeness: Does it include all needed content?
• Clarity: Is text clear and readable?
• Layout: Is layout correct, without misalignment?
• Color: Are colors accurate, without color cast?
• Size: Is size suitable for use case?
• File size: Is file size reasonable?
• Privacy: Does it contain sensitive information that needs processing?

Common Issues

If you find problems, you can:

1. Retake screenshot: Retry after adjusting parameters
2. View help: Check help documentation
3. Check permissions: Ensure extension permissions are set correctly

📊 Practice Exercises

Exercise 1: Webpage Screenshot

Choose your favorite website, try:

• Visible area screenshot
• Full page screenshot
• Different area selections

Exercise 2: Element Capture

On the same page, capture:

• Navigation bar
• Article title
• Product image
• CTA button

Exercise 3: Creative Screenshot

Try some creative uses:

• Create tutorial screenshots
• Collect design inspiration
• Create product comparisons
• Record learning notes

🎉 All Done!

Congratulations! You've taken your first perfect screenshot!

Next Steps

1. Explore more features

   • Screenshot Mode Details
   • Storage Management

2. Improve efficiency

   • Explore extension personalization options
   • Set keyboard shortcuts to improve work efficiency

3. Share your work

   • Share screenshots on social media
   • Create tutorials and guides

Keep Practicing

• Practice different screenshot scenarios daily
• Build personal screenshot library
• Develop good file management habits

🎯 Many tips, more practice, let screenshots become your superpower!