Join Justin Seeley for an in-depth discussion in this video Setting up your project, part of Photoshop CC for Web Design.
- View Offline
- Exercise Files
…And putting out your guidelines.…So the first thing I'm going to do is make sure I'm working in my…Web workspace, so that all the tools that I want, are available to me.…I'm also going to make sure that the Guide guide extension is present on the screen.…
Then I'm going to go up here to the File menu and choose New.…And I'm just going to call this ttc, for twotrees creative _wireframe.…Then underneath here what I'm going to do is setup my width.…You know, my normal thing is 1280, so let's plug in 1280.…And then for the height, remember, my sketch I estimated 2900 pixels.…Obviously, this number could change at any time, and depending on how big…I make my sections as we go through, it may or may not change.…It may get bigger, it may get small.…Let's hit OK, and so there's my new document.…
And now what I'm going to do is start…building up my grid system on this document.…Let's zoom in a couple times so you can see what's going on,…and by the way I'm zooming in with Cmd or Ctrl+plus on my keyboard.…And I'll bring up GuideGuide now.…
- Why use Photoshop for web design?
- Decoding the mysteries behind screen size and resolution
- Giving your website a purpose with a content strategy
- Customizing a web workspace in Photoshop
- Designing responsively
- Creating wireframes on a grid
- Choosing colors and fonts
- Developing a UI kit with Photoshop
- Assembling a page mockup
- Creating image sprites
- Optimizing images
- Integrating with the rest of the Adobe Creative Cloud
Skill Level Intermediate
1. Core Concepts
Understanding the "new web"2m 39s
2. Setting Up Photoshop for Web Work
3. Designing Responsively
What is responsive design?5m 26s
4. Creating a Wireframe
5. Creating Aesthetic Elements
6. Creating a UI Kit with Photoshop
7. Assembling a Page Mockup
8. Optimizing Web Graphics
9. Creating Image Sprites
10. Using Other Apps in Your Workflow
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.