Before diving into the creative possibilities of Photoshop for web design, it's essential to establish a proper workflow foundation. Complete the following setup to ensure you have a clean, organized workspace for all upcoming exercises.
Topics Covered in This Photoshop for Web Design Tutorial:
Setting up Your Class Files
Core Tutorial Components
Setting up Your Class Files
Learn the essential first steps to properly organize and prepare your working environment. This foundation ensures smooth workflow throughout the tutorial.
File Management Best Practices
Master the techniques for maintaining organized project files and creating backup copies. Proper file management prevents data loss and maintains project integrity.
Pre-Tutorial Preparation Workflow
Clear Your Desktop
Minimize or hide all open windows to access the Desktop clearly and locate the Class Files folder easily
Open Class Files Folder
Navigate to and open the main Class Files folder containing all tutorial materials and resources
Create Personal Copy
Follow platform-specific instructions to duplicate the folder and create your own working copy
Creating Your Own Copy of Class Files
Throughout this workbook, you'll be working with carefully prepared class files designed to reinforce key concepts and techniques. Rather than risking damage to the original files—a best practice in any professional design environment—we'll create a personal working copy that you can freely modify and experiment with.
This approach mirrors real-world agency and freelance workflows, where preserving original assets is crucial for project management and client deliverables. Let's get your workspace organized:
- Clear your desktop workspace by minimizing or hiding any open windows so you can easily navigate to your files.
- Locate and open the Class Files folder on your system.
Follow the appropriate instructions for your operating system:
Mac:- Select the Photoshop for Web Class folder with a single click.
- Use the keyboard shortcut Cmd–D to create an instant duplicate.
- Rename the duplicated folder to yourname-Photoshop for Web Class (replace "yourname" with your actual name for easy identification).
- Select the Photoshop for Web Class folder with a single click.
- Copy the folder using CTRL–C.
- Paste the copy using CTRL–V.
- Locate the newly created copy (it may appear at the bottom of your folder list) and rename it yourname-Photoshop for Web Class.
Perfect! You now have a personalized set of class files that you can modify without fear of losing the originals. This setup will serve as your creative sandbox throughout the course, allowing you to experiment boldly while maintaining the safety net of pristine source files.
Platform-Specific Duplication Methods
| Feature | Mac Instructions | Windows Instructions |
|---|---|---|
| Selection Method | Click once to select folder | Click once to select folder |
| Primary Action | Press Cmd-D to duplicate | Press Ctrl-C to copy |
| Secondary Action | Automatic duplication | Press Ctrl-V to paste |
| Final Step | Rename duplicate folder | Rename copied folder |
File Duplication Verification
Ensure you can see the Class Files folder on your desktop or in the designated location
Follow the appropriate Mac or Windows instructions to generate a copy of the folder
Replace 'yourname' with your actual name to create a personalized folder name
Confirm that all files and subfolders have been properly copied to your new working directory
Creating your own copy of class files protects the original materials while giving you freedom to experiment and modify files during the learning process.