Join Sue Jenkins for an in-depth discussion in this video Branding and content, part of Designing Websites from Photoshop to Dreamweaver.
- [Teacher] Whether you're working from a wireframe, a mood board, a product type or starting from scratch, one of the best ways to populate your blank web mock-up canvas is to literally start at the beginning by adding branding and content. In this course, we actually have a wireframe and a mood board to pull layout and aesthetic decisions from however since the actual sizes of elements in our design may be somewhat dependent on the content, and we don't have any directives from our client to use specific measurements.
Getting the content onto the art board first can be a useful way to start. We'll begin by opening our blank Photoshop file that's 1170 pixels wide by 1700 pixels tall, RGB, and 72 pixels per inch. We'll start by adding the company branding which is key to identifying a website. If you happen to have the logo artwork in vector format, I recommend copying the logo from it's native program and then pasting it into Photoshop as a smart object.
A smart object is a special image layer that retains its source file qualities within the Photoshop environment. In other words, if it's a vector object pasted in from Illustrator, you can scale it non-destructively in Photoshop as if it were a vector object without any loss of resolution. For example, we can open the logo file in Illustrator, copy it, toggle back over to Photoshop, and paste it in. When the Paste dialogue box opens, we select the smart object option and choose whether to add this file to our Adobe library.
I'm going to deselect this option for now, and press OK to paste. When a smart object is pasted into the file, it has a bounding box visible allowing us to scale and rotate as desired. When scaling, be sure to hold down the Shift key and drag to scale proportionately. When you have the image sized to your liking, press Enter or Return on your keyboard, to place the artwork into a new Photoshop Smart Object layer. You can then use your Move tool to move it into the desired position.
Next we can bring in the content. When I work with clients, I always request the site content be delivered in a Word document or in Google Docs so I can easily copy and paste the content into my design mock-up. Here is the content for the Topsy Turvy Cake Design client we'll be using in this course. When you copy text over from Word to Photoshop, use the Type tool to create as many separate layers as needed for each element. That way you can more easily edit the style, size and position of each part later on.
The Header content in your design typically includes things like the logo, a tag line, maybe an 800 number, navigation links. The Footers will often contain a copyright notice, links to social media, Footer links and contact info. Once you've copied over all those things for the header and the footer, you'll add in the specific content and images for the home page or whatever page you happen to be mocking up. Here is an example of what your file might look like after you transfer in all of the page elements.
If you're like me, at this point you might want to create folders to organize the layers, like grouping all the header, footer and page content into separate folders. For now, don't worry about where the various elements are placed or how they look. This phase is all about getting the information into the document. The design part comes next where we'll focus on developing the layout and navigation followed by playing with fonts and colors.
- Setting up the Photoshop and Dreamweaver workspaces
- Planning a site and defining site goals
- Making a site mockup
- Deciding on branding and content
- Adjusting color and fonts
- Slicing graphics
- Optimizing graphics for the web
- Creating a favicon
- Working with Bootstrap files
- Creating a navigation menu
- Using the Photoshop extractor
- Coding for SEO
- Making sites accessible
- Checking for errors with the Validator tool
- Using the Clean Up HTML tool
- Using the Link Checker panel
- Building pages with HTML
- Styling pages with CSS
- Making site galleries and carousels