10 Tips For Creating Website Mockups In Photoshop

Here are some things I’ve discovered while creating website mockups in Photoshop. They’re not gospel, just things that you may find helpful:
1. Use shapes and shape layers as often as possible. You can resize then easily without quality loss, good for later changes.

2. Blending options are your friend. Double click a shape layer and you can do all sorts of effects: gradients, shadows, color overlay. They’re much easier to make changes to later on when a client says: “Can I see that gradient in blue?”

3. Use Crisp antialiasing on your font layers. It’s much closer to browser rendering. Keep in mind that most modern operating systems don’t smooth fonts below 11 or 12 pixels, so for smaller fonts, you’re probably better off setting it to None.

4. Use web safe fonts on any parts of the site with live text. You might be able to wow the client by using Verlag for the body text of your mockup, but you’ll have a rough time turning that into CSS/XHTML. While logos and other static text can be replaced with images fairly easily, you should use those web safe fonts as often as possible. Search engines index browser text, screen readers can read browser text for visually impaired folks and browser text is much easier to translate. (And if you’ve “just gotta have that font”, take a look at sIFR. Use sparingly.)
5. Use nested layers to duplicate the DOM. If that went over your head, let me rephrase: use your layer folders to recreate the general structure of your site. Put all of the images for the header in a header folder. Inside that, make a folder for the logo, a folder for the main navigation, a folder for search field, etc. Not only does this make moving stuff around easy, it helps things stay organized and think in terms of content. (Keep in mind, Photoshop CS3 only allows layers to be nested 5 deep.)

6. Use different layers for multiple versions of the same page. If you do multiple page comps, usually just the main content changes while the header, footer and sidebar often stay the same. So using the folder structure in Photoshop, you could create folders like:

content - front page
content - contact form
content - entry

And then just toggle their visibility when saving multiple drafts.
7. Save the finished product as a JPEG at 100% quality. You can usually get away with 80%, but why skimp when sending a screenshot to a client for approval?
8. Get your width right. If your target screen resolution is 800px, your mockup shouldn’t be any wider than 760px. If your targeting 1024px, your mockup should probably not exceed 960px. A very large number of people these days are using 1024px or higher. Nathan Smith’s 960 Grid System has a good Photoshop template to start with.
9. When it comes to mocking up forms, don’t reinvent the wheel. The Designer’s Toolbox has a huge collection of form elements from different browsers and operating systems you can use, free of charge.

10. Use all of the resources you can find. Here are some I’ve found useful:

ColourLovers: Colors, Palettes and Patterns
Smashing Magazine’s Freebie Icons, Buttons and Templates
Deziner Folio: 131 Beautiful Photoshop Styles
Deziner Folio: 130 Beautiful Photoshop Gradients
Stylegala’s Bullet Madness
Vitaly Friedman’s 25 Best Free Quality Fonts
FamFamFam’s Silk Icons
Feed Icons (in every imaginable format)

Sometimes you just have to see it to get it, so I’ve put together a sample site mockup in PSD format for reference purposes. Hopefully you’ll find it beneficial:

The mockup took me some time to put together. If you do get some use of it, maybe you could drop a few coins in the old hat?
Also, if you found this article useful, check out my article, and Part two includes a sample invoice you can download that may come in handy if you’re just learning the ropes.

Use x-ray techniques in Photoshop to show naked skin through clothing

Do those new naked body scanners have you freaked out at the airports? As far as the TSA is concerned, those x-ray machines are here to stay, but you might as well take comfort in knowing that airport security guards aren't the only ones looking at your private parts. Practically anyone with a computer can manage to see through your clothes, and it's all thanks to a little program called Photoshop. Thanks, Adobe. With a few tweaks using the tools in Photoshop, you can see those boobs in no time, male or female. The video is in German, but it's not hard to figure our what's going on, especially if you're familiar with Photoshop. First, create a few duplicate layers, then get a handle on some of these tools to make the naked body through the clothes: * Auswahl erstellen (Create Selection) * Tonwertspreizung (Input Levels) * Belichtung (Exposure) You can also do this see-through clothing effect in free design programs, such as GIMP .

40 latest creative photoshop text effects

Create a Glowing Liquid Text with Water Splash Effect in Photoshop In this tutorial, we will show you the steps we took to create a Glowing Liquid Text Effect in Photoshop. We will be practising the use of liquify filter, layer blending options, as well as some image adjustments. Create a Realistic Wooden 3D Text Image In this tutorial we are going to take a few 2D textures as well as a few Photoshop techniques to create a realistic 3D text image. Easy X-Ray Typography In Photoshop In this tutorial we will show you how to create a simple x-ray effect of a letter, in this case the Abduzeedo logo A. The whole process is quite simple but it will require a couple of hours to pull it off. Easy Furry Text In Photoshop In this tutorial we will show you how to create a really cool and super simple furry text in Photoshop CS6. We will use basic filters and tools but it’s nice to say that we took advantage of the a new feature in Photoshop CS6 that is to apply layer...

Royal 3D Text Effect in Photoshop CS6

Just make sure to check the 3D settings under Edit -> Preferences -> Performance, and Edit -> Preferences -> 3D. Default values should work fine, but if anything seems to be not working properly you can always check those settings. Step 1 - Create a new 1600 x 1200 px document and Fill the Background with black. Create the text in white using the font Dunkin Sans. The font size is 400 pt and the text is better written in All Caps (if you’re not using only numbers). Step 2 - With the text layer selected, go to 3D -> New Extrusion from Selected Layer. This will instantly convert the text layer into a 3D layer. All the 3D scene elements can be found in the 3D panel (Window -> 3D). Click the main mesh name to edit its settings. - The 3D Mesh settings and attributes can be accessed and modified through the Properties panel (Window -> Properties). If you scroll down the Properties panel you’ll find the Character Panel button, which ...

Photoshop Zone

Search This Blog