Create Website Mockup Design Using Photoshop

If you want to start your own blog or website and you are somewhat familiar with Photoshop, why not  create your own design that’s appropriate for your site. Photoshop is a great tool to create a design and get the ideas out of your head, to your web designer, and onto the web.

I am using Photoshop CS3 to create my design. You can use pretty much any version of Photoshop to do these things. Create a new Photoshop file with a width of 1200px and a height of 900px to 1200px. It’s always a good idea to set up some guides to help you align your content when designing a template. You can set these guides to 110px and 1090px horizontally and vertically. This will help you center your content, leaving you with a 980px square centered to begin your design.website design photoshop

You will be creating lots of layers, so it is important to keep everything well organized. Naming your layers and and place things in groups often makes it easier for you to navigate through your design later on. This is especially important if you are sending your template to a web designer, because it makes it easier for them to navigate through your mockup design as well.

background photoshop designYou can continue on to add a background color or a background image to your mockup design. Shapes like rectangles can also be used to create backgrounds, tables, borders, and navigation bars too. Remember to have the background an appropriate color to where the text is easy to read. Now, you can add a logo or site title and some dummy content where you desire.


web design dummy tet


Many websites have a large attractive picture in the header to grab one’s attention, called a header image. You can add in a header image and other images depending on your taste and your sites intentions. For example, a photographer might have a lot of images in a gallery to showcase their work, when a business site might not want too many pictures to distract from the content.



photoshop web template


If your tired of seeing the same boring themes, then why not create one yourself? If you don’t have any experience with Photoshop, creating a mockup website design may be a little complicated at first. Take your time and soon you will be able to create a useful mockup design for your web designer to put to use.



Social Media

Connect via Facebook Connect via Twitter Connect via Youtube Connect via Googleplus

Do you need a quote?

We'd love to give you a free quote on whatever you may need, just click on the button below.

Request a Free Quote
© 2014 We Create Web Designs. 300 Carlsbad Village Dr. Suite 108a-96 Carlsbad, California 92008. San Diego County. All Rights Reserved.