Posts Tagged ‘photoshop’

Yesterday, I covered the first 10 steps in creating a blog mockup in photoshop, today I will be wrapping it up with steps 11-20. When we left off, we were had just finished the header and were ready to move on. If you didn’t do yesterday’s steps, do so now and then come back. If you are ready to move forward, let’s move onto the next steps.

Step 11: Open the document you saved yesterday. Starting today, your design should have a completed header and space for the navigation, the content, the sidebar and the footer, just waiting for design. The next piece that we are going to work on is determining the colors that we want for the rest of the parts of the site. Remember, this is just a basic design to help you to get an idea of your site, so feel free to have fun and try out a few things. To work with a layer, you must select it in the layer panel first.

Step 12: Changing colors to the pieces. When you created this document, the background was automatically created in white. If you want another color, you simply need to create a new rectangle the entire size of the mockup. Once it has been created, make sure to drag it behind all other layers. Then, double click on the layer to open the color panel and change it to whatever color you would like the background to be.  You will do this same step (double clicking on the layer to open the color panel) for each of the piece that you want to change. For mine, I want the background to be the color of the edges of my header, because I plan on using gradients and effects so that it blends into the background and looks like melted gold. I want the content areas to blend into the background as they reach the bottom and want the navigation and footer areas to look like gold bars. While I could walk you through how I created this look, I’d be giving away all my secrets…and well, that’s just not happening . I will leave you with a couple tips though:

• When you pick colors, choose colors that work well together and are easy on the eyes.
• Try, try and try again. Testing tons of colors and how they look together is the only way to really learn what you want and looks well together
• There is no right or wrong. Love lime green and tangerine orange? Who says they can’t work together!

After I made my tweaks, the colors now look like this:

Step 13: Adding social media buttons: I like working on the sidebar before I work on any other area as it has the most graphics and so it can be overwhelming at first. To start, I recommend looking for some social media icons that you love. You will need (at a minimum): an rss button, an envelope, a twitter button, and a facebook button. When I am looking for great images, I use Smashing Magazine. Their freebies collection has tons of great images that you can work with and the downloads are always safe. When you pick your social media icons, make sure that they fit with the theme you are creating. You will be adding text next to the images, so they can just be a symbol. Once you have selected them, download and save the images. For this design, I am sticking with the metallic look and have chosen symbols that fit with that look. To place the social media icons, make sure you have selected your sidebar in the layers panel. This will make sure that they are placed above this. Then, click on the arrow at the very top of the left bar. This will make it easier to work with the pieces, and must be selected to move them later. When you are ready, go up to ‘file’ and select ‘place’, just like you did with the header image. But, this time, just click the check mark to okay the image, do not re-size anything yet. Place all 4 images on the page and approve them all. They should be too large, it is okay. Once they are all on the page, they should have placed one on top of the other. If they didn’t, and you need to align them, click on the top one in the layers panel, hold down shift, and click on the bottom one in the layers panel. This will select them all. Then in the top navigation, use the alignment tools. Now that you have them all aligned, we are going to size them as a group. If you haven’t yet, select all of them in the layers panel by clicking on the top one, holding shift and clicking on the bottom one. Now, make sure that the arrow tool (top on the left bar) is selected and you will see the dotted line around them with squares at the corners. Click on the bottom right corner, hold down shift, and then drag to make them smaller. Once you have them the size that you want, click the check to approve that size, and then move them over to the top of the sidebar. Once there, unselect the rss button from the layer pannels. Drag the remaining three down. Then, unselect the email button and drag the remaining two down. Finally, unselect the facebook button and drag it below the twitter button. You will have something that looks like this:

Step 14: Adding text to the sidebar. The sidebar needs to have text, not only to explain what these buttons are but you may want categories, archives, or other buttons. Because this is just a simple mockup to show a designer, things like categories and archives don’t need to be fully detailed. We are going to add text to the social buttons and then placeholder text f or the rest of the items that you want on the sidebar. First, it will help if you zoom into 100% and focus on just the sidebar. Click on the magnifying glass on the left side and then in the top panel, click ‘actual pixels. Use the scroll bars to center the sidebar in your window. To add text next to a social button, make sure you click on the button you want to be working with in the layers panel. This will make sure that the text is in the right order. Then, click on the “T” in the left panel to select text and draw a text box next to your symbol. It will create a dotted box for you to add text into. Before you start typing, make sure to change the font size and color in the top navigation. It will still be set to the same size you had in your header. I suggest leaving the font type the same, to create a unique look. If while you are typing, you see the box and the cursor moving, but no text, make sure that the text layer placed above your sidebar. If it did not, select the text layer in the layers panel and drag it above the sidebar layer. If you need to get back into the text box to edit it, make sure that the “T” is selected on the left panel, and that you have selected the text layer in the layers panel and then simply click on one of the letters. It will show the edit box. Repeat the steps for creating a text box next to each of the symbols and adding text. Make sure you click the check box each time to approve the text and then move the box to align with the symbol. Also, make sure to keep the font size and type consistent for all symbols. Once you have added the text for the symbols, add a large text box below the bottom symbol. In this box, add the names of anything else that you want to go on the sidebar (remember, this should all be in the word document you created yesterday). Your finished sidebar should look something like this:

Step 15: Navigation bar: Your navigation bar is where the pages for your blog will go. These are the pages that we wrote down yesterday. For your navigation bar, I recommend using a text that is easy to read and will match the content area. A couple good fonts to consider are Arial, Century Gothic, Georgia and Myriad Pro. I am going to be working with Century Gothic for the content on this site. To add the navigation text, select the navigation bar in the layer panel so that it will place the text layer above this. Then, click on “T” on the left side and drag out a text box the same size as the navigation bar (zooming to 100% and focusing on the nav bar will be helpful for this step). Select the font type, color and size in the upper panel. Type the names of your pages, just adding one space between each name. Then, select all the text (the same way you would in any document, by dragging over all of it) and click the center alignment in the upper panel. Now, click between each page title and add 2 more spaces. This will give you a total of 3 spaces between each page. Adjust the size of your font to look right on the navigation bar. In some case, you may decide to make the navigation bar smaller or larger. In this case, my navigation bar needed to be made smaller. To do this, I simply click on the navigation bar in the layers panel, click on the top arrow on the left panel and dragged the top of the nav bar down until it was the size I wanted and then clicked the check box to approve it. My site now looks like this:

Step 16: Fixing spacing. If you notice, because I made the navigation bar smaller, there is a lot more space between the header and where the navigation bar starts than there was before. I want the spacing fixed. So, I select all layers in the layer panel except for the background and the header. This will allow me to move everything as a group. To do this, click on each layer you want while holding the ctrl key. This allows you to just pick the ones you want, instead of the group. Then, simply use the up arrow on your keyboard to push it up to where you want it to be. If you just want to move certain pieces up, you can just select those pieces and move them. Once you have the spacing right, we can move onto adding the styling for the blog posts themselves.

Step 17: The blog posts. This is the largest amount of content on your site – this is where all the text will be and where you will entertain and share with your readers.We are going to use one large text box to create just one blog post so that you can choose colors and determine formatting. Then, open a browser. We are going to generate some Lorem Ipsum, or placeholder text, for you to work with. I recommend selecting 3 paragraphs. Once you click generate, select and copy all three paragraphs. Now, go back to photoshop. Create a text box the same width and height as your content area. Select the font color, size (recommend 14 pt) and make sure it is the same font type as you used in the navigation. Type in a title for the blog post, the date for the blog post, categories and tags. Then, paste the 3 paragraphs of lorem ipsum that we copied. Click the check box to approve it.
If you notice, the text looks very crowded to the sides of the box and there is no separation in sizes or fonts. Also, the spacing is very small and it is difficult to read. The next step will guide you through fixing all of this

Step 18: Formatting the text. To work with the text again, select the text layer in the layers panel and then click anywhere in the text box. First, drag the left edge of the bounding box in so that the text comes off the left side of the content area, then do the same for the right. We want space on either side of the text. Then we will move on to the text. We are going to start by working with the blog title. Select just the blog title and increase the size of the font to match the same size you used in the navigation bar. Then, click on the A| in the panel just to the left of the layers panel. This is the advanced text editing, and where you can make it bold, underlined, etc. I suggest making it bold and underlining it. Then, decide what color you want. I suggest something different – something that stands out. Then, test out spacing between the lines, moving the blog title away from the rest of the content. I recommend making the blog date, categories and tags smaller and placing a different colored bar behind them to make them standout. I have also increased the line spacing between the content (another trick you can ask a designer about) so that the reading is easier. Once I have worked with the formating, the post now looks like this:

Step 19:The little extras. What makes a good design a great design is the little extras that are involved. For example, having something happen in the navigation bar to show you which page you are on. Having a special look to your comments section rather than just white and black. Using fun images on the sidebar or at the bottom of every post that makes people remember you. All of these things can be added to differentiate you from the rest of the pack. Using the tools that I have taught in this tutorial, add some of  your own special tweaks and make it something that makes you proud. Can’t figure out how to do them? Write notes where you want things to be and save that for the designer.

Step 20: Send this to your graphic designer and at your first meeting, walk through your thought process. The goal will be to just provide them with a clearer understanding of what you are looking for.

Want to see what mine ended up looking like? Check out my added touches…

Click on the image to see the full size version

Many people I meet with about designing a site have an idea in mind of colors they want, or a layout that they like. The problem is that they have a tough time putting it into words, and I have often heard, “I just wish I could show you a mini mockup”. A lot of times, they will come to our first meeting with a sketch on paper, which is wonderful and I appreciate! But, if you are looking for a little more, or want to test some things out yourself,  try photoshop. Photoshop is what I use when I actually create client mockups, but you can use it too to help you get your ideas down. Adobe offers a free 30 day trial of any of its programs, including photoshop. So, if you are considering doing a blog makeover, I recommend downloading the trial and following this tutorial. The tutorial is going to span over multiple days as it takes a lot of time to really build out a mockup for a site. Today, we are going to cover the first 10 steps, which will lead you through creating the base layout and your header.

Step 1: Open a word document. Write down a list of all the pages you want, the sidebars that you need, the links to social media sites, all the details that need to fit on your main page. This is where the layout for your site starts. If you don’t know what you need, you can’t start the design. Don’t worry about what is going to go on these pages, just make sure to thoroughly think through everything you want on the site.

Step 2: Open photoshop. Under file, select new. There are a lot of size you can choose, but for a website or blog mockup, I recommend setting it to 1024×2000. 1024 is going to be the width of your finished product. This width is most commonly chosen because it is the size that most laptops and small screens use. If you make your site bigger than that, people with smaller screens will not see everything. I set the height at 2000 so that I have room to work with. We can crop it smaller later.

Once you have the sizes right, click okay. It will open a blank screen for you to work with.

Step 3: On the left hand side, select the rectangle tool. It is the 18th button down on the left, below the one that looks like an arrow. This is the tool which will allow you to create many different shapes, but for now, we just want the rectangle. When you click on the button, you will notice in the upper bar that you have a variety of options, including shapes and colors. Make sure to select the rectangle. Then, click on the colored box at the far end. It will open up a color spectrum. Pick your favorite color and click okay.
Your bar should look like this at the top of the screen, where the pink is the color that you have chosen to use.

Step 4: Draw rectangles for your header, your navigation area, your content and your sidebar. There are many ways that you can layout your site, but we are going to start with the most common style, which is a header, then a navigation bar, then the content area and a right aligned sidebar, with the footer at the bottom. Remember to leave space between the areas for the background to shine through.  If you do not want the background color to show through between the content area and the sidebar, we can make that adjustment later. For now, just leave space between all areas.
If you notice, in the layers pannel, you will now see 5 different layers. If you want to make changes to a piece in photoshop, you must first select the layer that you want to work on it in the layers panel by clicking on it. Once you have created all of your layers and you like how the spacing looks we can move onto the next step.

Step 5: Creating your header. Your header can include whatever you want, from the name of your site to pictures and designs. We are going to create a very simple header with just one image and the title of the site. To add an image, go to file and select place. This will open a file browser for you to choose your image. Once you select your image, you have to “okay” it. To do so, in the upper navigation bar, click the check mark. It will then actually place the layer there. Depending on which layer you had selected when you placed your image will determine where it places. If the image is hidden behind another layer, simply select it in the layers panel and drag it up the layers, placing it where you want it to be. In this case, you will want it at the very top. Once you drag it, just let go and it will drop into place.

Step 6: Now that the image is above the header, it will be sitting on top of that layer and will block out part of it. Select the image layer in the layers panel and then click on the arrow at the top of the panel on the left. You will see a dotted outline with boxes at the corner of the images. Place your mouse at the bottom corner. Click on the corner and hold down the shift key. Now drag the corner out until the right side of the image covers the entire header. Once it does, let go of your click, then let go of the shift key. You will again have to confirm the changes by clicking the check box in the upper panel.

The image will now be sitting on top of the header, and behind the rest of the layers. But, we want this image to fit within the header itself so we are going to create a clipping mask. The clipping mask will basically make only the part of the image that fits within the box you have planned for the header show. You can move the image inside of the header, and it will show different parts, but it will only be as wide and as tall as the size of the header.

Step 7: Creating the clipping mask: Once you have moved the image on top of the header layer and have made it large enough to cover the width, you need to select the layer in the layer panel. In the layer panel, right click on the image. It will open a menu of options. Select ‘create a clipping mask’.

Once you select it, it will crop the image to fit within the area you had decided for the header. If you do not like what section of the image is showing, you can click on the image in the layer panel and then use your up and down arrow to move it within the header. This will show different parts of the image as you move it around. Feel free to play, or change the image. If you want to change the image, simply select the one you have now and click delete. Then follow the steps above for adding a new image and resizing it to fit in the header. When you have it where you want it, we will move on to creating the title.

Step 8: Adding the title: Right now, the complete mockup is zoomed at only 25% so that you can see the entire design. Since we are going to work with just the header area, we want to zoom it in. To zoom in, select the magnifying glass on the left panel. It is the bottom tool. Then, click on “actual pixels” in the upper navigation. Use the scroll bars on the right and the bottom so that your header is in the view.

Step 9: Adding text to the header. In the left panel, select the “T” icon for text. Then, drag out a text box on top of the header. Once it is the size of the header, let go and you will have a cursor inside of the text box. Type in the title of your blog or what text you want at the top of your page. Once you have typed it out, select the text (or hit ctrl A). In the upper navigation, you can choose the font, the size and the color of the text. This is all personal preference, but remember, you are viewing this at 100% so whatever size it is on here is what size it will look like live. Once you have selected the size, the font and the color, you will need to click the ‘okay’ check mark again (this is done anytime you change a layer, it commits your changes). If you want to move where the text sits on the header, click on the text layer in the layers panel and then click on the arrow tool on the top of the left panel. Then, use your up/down/left/right arrows on the keyboard to move the title where ever you want it to sit.

Step 10: Making the text look cool. One of the ways to make your title stand out is to give it some effects. There are tons of effects, and it would take years to go through every variation. I suggest that you play with them and figure out what you like the best. To do so, while selected on the text layer, click on “fx” at the bottom of the layer panel and click on “blending options…” to open all of the options for your text. Make sure that the preview box is checked and drag the box so that it shows the full text. To work with a style, click on that style, and then test out the settings. Remember, this is all yours! Play and have fun. Try out different textures, gradients, drop shadows, embossing, etc. Once you have it the way you want, click okay. If you want to make changes later on to the effects, all you have to do is double click on the “fx” that will now be next to that layer.

Wrapping up today, make sure to save this document so that you can keep working where you left off. Tomorrow, I will be covering the next 10 steps, which will walk you through 10 more steps to creating a blog layout.

Quick story first: my parents have a poodle (Bella), who fell in love with a tortoise (Douglas) that friends of theirs had as a pet. So my parents friend gave Douglas to Bella as a pet. (yes, the poodle has a pet tortoise). Anyway, my parents left in their RV last week to go to Arizona for 2 weeks of relaxation, site-seeing and golfing. While Bella could go with them, Douglas couldn’t, so I offered to “tortoise sit”. I learned 2 things about tortoises really quickly: they are scared of absolutely every moment, and they like to hide in stuff.

Onto the point of this post: natural motivation.

I had a bit of a crazy day today, working on a couple client projects. I was tired, a little crabby and I needed a little brain break. So, I wandered outside to see where Douglas had disappeared to. When I found him, he was wandering along our patio. I sat down near him, and for the first time since I got him last week, I really looked at him. When he walks, is head bobs in an interesting fashion …I could almost hear him whistling a little tune and see his smile as he meandered along. His legs and arms (or limbs?) are covered in little spikes, but they aren’t sharp, it is more to pull him along. He kind of drags them, rather than lifting them, because lifting them would be heavy with the shell. Then there was his shell. It is beautiful, smooth, colorful and really unique. After staring at him for what seemed like 20 minutes, I felt really relaxed, my thoughts had slowed and I was smiling. Douglas was my natural motivation today. Just watching him participate in life in his own way was what I needed for that extra boost of energy and refocus to finish out my day.

Just before I came back inside, I snapped a picture of him. Not thinking much of it, I opened the picture in photoshop and played with a few different filters – and was pleasantly surprised when the image above came out.

Where can you find a little natural motivation?

You are only limited by your creativity and your talent. Neither of which have limits if you are willing to learn.

What turns your attention? What catches your eye? Do you give yourself a chance to stop and admire whatever it is?

For me, designer shoes advertisements and incredible photo manipulations are my weakness.

Here are my two favorite of the moment:

Peter Lippmann for Christian Louboutin, Winter 2010

Fishy Island by Eric Johansson

1. Twouble with Twitterers: yeah, ok, so I may be this bad sometimes…

2. Redesigning the Stop sign – if a marketing team was in charge of designing a stop sign…definitely true for some of the large agencies.

3. Font Fight – for the Web Geek in all of us (first shown to me by Creative Whirlwind)

4. Hulu and Dennis Leary – bliggity blogs, facey spacey’s, tweety pages…yeah, I couldn’t help but laugh

5. Your printer is a brat – for all of us who have dealt with the evilness of a printer…

8 hours of Photoshop, graphic design and images = difficulty getting my mind focused on writing.

The designs that I created today were great (if i do say so myself…) but I was having a lot of trouble pulling myself a way to write. And even when I did, the most writing I could do was on twitter (and even there was hit or miss). After using Twitter to discuss the writing melting powers that Photoshop has on me, @beachpig sent a great message that clearly explained what I am suffering from and what I need:

“Rental creativity…when the Wright side of your brain is tapped out.”

Of course, that led to a great question for my readers: Do you find it harder to do a different type of work after you’ve been focused on one type all day? Where do you find your “rental creativity”?

The last few months have been tough for us all (and I don’t even want to think about tomorrow…) but so far, I am surviving. It may be just barely, and it may not be the most fun, but it is still surviving.

Although it isn’t exactly the first of the month, it is the first Monday and therefor the first day of this month that I am thinking about work and how to keep it going for the next few months. One of the best ways for me to start a month off right is by learning something new that I can spend the rest of the month trying to improve. For example, last month was my time to focus on learning to use photoshop better than I already can. This month, I have decided to take a step back and review some of the basic web design tricks. Often we are so focused on moving forward that we forget to go back to basics, but with how crazy everything is around me right now, it feels good to go through and simplify a few things – plus, there are always new tricks I can pick up…because unfortunately, as much as I wish I did – I don’t know everything .

What new tricks can you pick up? Is there a great tutorial site you turn to for help?