Creating a simple WordPress theme. Creating a simple WordPress theme Psd wp templates

Category:. 4 comments. Published: 24.11.2012.

Hello, today I decided to publish an article on creating a website layout, and which we will then layout and pull on wordpress engine... Therefore, if you do not want to miss the release of these articles, then by all means subscribe to blog updates and after the release of the article you will immediately know about it. Creating a psd site layout, and creating a wordpress template, is actually a very simple process and I am sure that you can follow my instructions and get yourself a completely unique template.

To create a template, we do not need much knowledge, knowledge of Html and CSS, just read the articles in the topics on this blog. Pay particular attention to the use of DIV tags and SPAN tags.

Now let's figure out what we need in order to create a PSD layout and then make this template for the site. In fact, you do not need much for this, a photoshop program that can be downloaded on the Internet, I hope that this will not be a problem for you and download the source materials for this.

Also soon I will publish articles in which I will talk about how to create textures and backgrounds for the site, so subscribe to blog updates.

Document creation.

Now let's start creating the layout and create new document... Select the file - create. Select dimensions for the document 960 on 1600 pixels.

Draw out two guides, left and right. To do this, simply click on the rulers and draw lines.

Now we need to resize the canvas. For this we choose Image-Size canvas and set the canvas size to 1200 x 1600 pixels. After that, fill this area with white using the Paint Bucket Tool.

Groups for the template.

Now let's create groups for the site. Let's create standard groups as in all templates: header, menu, content, side column and footer of the site. It is very easy to do this, in the layers menu, click on the folder image, to rename the created group, you just need to double-click on the name and enter the desired name.

Site header.

Now let's start by creating a header for the site. The first thing to do is open a texture named "Texture 1"... And now we need to crop the black background, it's very easy to do this, select the tool "Magic wand" and click on the black background, now right-click on the light area and select the item "Invert the selection".

The next step is to set the accuracy of our boundaries, select the right mouse button, and the item to refine the edge. And set all the settings as shown in the picture.

Now we choose “ layers - new - copy to new layer". Now take the layer with the mouse and drag it onto our drawing.

The next step is to flip the drawing. To do this, select Edit-Transform-Rotate 90 degrees counterclockwise. After that, by pressing the left mouse button, you will need to move your layer, as shown in the picture below.

Now we need to increase the saturation of our image and for this we go to the tab Images - Correction - Hue / Saturation... Now we need to reduce the brightness of the picture to -100. And this is what we should get:

Now let's write our website logo. For this we need to install a new font. I think you have already downloaded the source file and there is also a font file in the archive. First thing you need to do is unzip the font. Now we need to go to the folder (most often this is the C: / windows - Fonts Drive).
And copy all the font files there. Now restart the program and this font will be available to you.
Now select the Text tool and select our font, color white and create a logo near the left guide. Here's what I got.

Now let's create a menu on the right side. It will consist of three main points and this is Home, Contacts and about the author. Select the Text tool again and click them in the right place. The color is white and the font is Wide Latin and the size is 18 pixels.

Create a new layer. Now we take the tool "rectilinear lasso" and select the button around one of the labels.

And fill the selected area with 2A2A2A color. Now change the order of the layers, transfer the layer with the inscription above the layer with the fill.

The main content of the site.

And now we have a menu button after being clicked on. Now we need to go to the Content folder and create a new layer in it.

We open picture 3 and place it below all layers. With the help of transform, we increase the size of the picture until it fills all the space.

Now adjust the brightness and contrast of the texture. To do this, press the buttons Ctrl + Shift + U... Choose Image - Correction - Curves.

We set the settings as in the picture.

Create a new layer and now we will select the content area with you. The content area will be white and 660 by 1200 pixels. To do this, select the "rectangular area and style - specified proportions" tool, where we must enter the dimensions of the field, and then fill the field with the "Fill" tool.

Now we need to set a stroke for our field. Select the layer on which our picture is located and click on the "Add layer style" button, in the drop-down menu select Stroke.

And set the following settings - thickness 1 pixel and color c8c7c7.

Now you open picture 4, using scaling we reduce the size, it should be about ten pixels larger from the white field on the right and left. At the top and bottom, you need to indent 50-60 pixels.

Now we press the combinations of buttons Ctrl + Shift + U to desaturate the texture, and adjust the brightness using curves. Settings as in the picture.

Select the layer with our white canvas, right-click and select " Select pixels».

Now select the gray layer and click selection - modification - compress, and set it to shrink by three pixels. After that, we need to invert our selection, we already did this, and it's easy to do this, choose Selection-inversion, press the button Del... Here's what we should get:

Now create a mask for the same gray layer.

Select a black-and-white gradient and left-click to draw from the middle to the bottom of the page and thus smooth the transition.

Now let's create the page navigation buttons. To do this, we just need to draw a black rectangle, you can choose the size at your discretion. Also in each button you need to register the name of the pages. For the inscriptions, use the font Times New Roman and size 18 pixels.

Now let's open a picture with icons and add them to the opposite side of the main menu. Now we need to indent the content on both sides by twenty pixels. Now we need to add a title to our first article, the text color is black. For the date and number of comments, I used the color cb8154.

Now, to separate the header from the main content of the site, draw a line. In order to draw a straight line, you need to select the pencil tool and hold down the Shift key and draw a line by pressing at the beginning and drawing to the very end of the line.

Now we need to create a place for the preview. To do this, create a rectangle with the dimensions we need, I decided to make 165 x 165 pixels, and fill it with black. Apply settings to it: stroke and shadow.

Stroke.

Shadow.

Now let's add some free text. Here's what we should get:

Now after the end of the articles, you need to separate the 30 pixels and the gray color (СССССС). Then draw four 32 x 32 px squares and fill them with 8E0A13 red.

Drawing a search form.

To do this, we just need to draw a rectangular area of \u200b\u200bwhite color, apply an inner shadow to it.

Now we draw a red button of the same size 32 by 32 and red and enter the word “ Search».

Sidebar.

On a new layer, draw a rectangle 270px wide and fill it with 1F1F1F color. We also add a title that is the same 270px wide and 25px high, filled with black.

Now we need to write categories for the blog. Text in Times New Roman font, 16 pixels in size. You need to add a picture to each menu item. We choose " Arbitrary figure"And select the shape of the raster point" Ornament 4”And fill it with 818181.

Site footer.

We won't bother too much with the footer, just fill the entire field with black and add a menu with Times New Roman font, 18 pixels in size and E6E6E6 color.

If you want to download a template that has turned out, then click on the button and a download link will be available to you. This concludes the article and I think that you now know that the first step to create a wordpress template is to create a PSD site layout.

Just a few years ago, a new direction of services appeared, which offer to automatically convert your website design from a Photoshop file .PSD into the code HTML + CSS is free. It used to look like a clumsy attempt at automating things with poor quality, but now these services have evolved and offer full integration with content management systems (such as WordPress).

In this article, I'll walk you through some pretty good services that can help you save time and money.

1. DevPress

The author of this service, Tung Do, is an excellent WordPress designer and developer who pleased with his new product. The service it offers is capable of the following: Theme design, XHTML / CSS coding, XHTML-to-WordPress theme development, and site management.

2. WP from PSD

A team of professional coders will help bring your design to standard cross-browser wordPress theme... They promise to do all the work at the lowest prices and in the shortest possible time. We can only trust the guys :)

3. Coding People

The service offers work with static XHTML, HTML5 and also offers a ready-made set of templates for an online store. Codingpeople is considered the authority in Germany for code quality.

4. WP Canvas

This service guarantees that it will easily turn your design into a high-quality cross-browser layout that is compliant with W3C Valid WordPress Theme standards.

5. PSD to WP

If you have created an excellent website design and you need a fast and high-quality layout, PSDtoWordPress will help you with this. Turn your design into a ready-made WordPress theme with PSDtowordpress.

6. Pixel WP

PixelWP.com has a great PSD to wordpress converter for their clients that you can rely on. You can be sure that your design will be implemented efficiently and on time.

7. PSD to Any

The service is able to generate a ready-made WordPress theme from the attached design layout. If you have no skills in programming and working with theme files, this service will definitely come in handy for you!

8.PSD 2 HTML

The service was first launched in 2005. P2H.com / PSD2HTML.com was the first of its kind and has attracted over 50,000 customers thanks to this.

9. HTML Cut

HTMLcut is a step-by-step service for implementing finished code from your design. You upload the PSD layout, the rest is up to the HTMLcut.

10. Rapid XHTML

If you want to turn your design into a finished blog or CMS site, RapidxHTML is just for you. The service supports popular platforms such as wordpress, Blogger, Drupal, Joomla and Magento.

Free PSD website templates are useful for setting up business, portfolio, and other types of websites. They can be found everywhere on the Internet. Not to say that most of them are ugly, but rarely will you actually find anything that would surpass your standards. Since Adobe Photoshop is one of those “easy to use, hard to master” programs, many beginners and professionals choose to go with PSD templates for their first website. That is because PSD web templates are easy to set up, edit, and use. However, you need to get those web templates from reliable sources. It’s easy to fall in love with a web template design, download it with excitement, and unpack it on Photoshop, only to realize that it’s an utter mess and you can’t find your way around it.

Good web templates are aesthetically pleasing, soothing to the eyes. Great web templates, on the other hand, combine that kind of beauty with usability to create the best eye-catching and easy-to-use templates.

Whether you want a portfolio web template, a personal blog template, an e-commerce template, or a restaurant template, you’ll find this list of the best free PSD templates really helpful.

UNLIMITED DOWNLOADS: 500,000+ Website Templates & Design Assets

All the Website Templates you need, and many other design elements, are available for a monthly subscription to Envato Elements. The subscription costs $ 29 per month, and will give you unlimited accessto a massive and growing library of 500,000+ items that can be downloaded as often as you need (Stock photos, too)!

DOWNLOAD NOW

When you have the design ready, the time comes to showcase it in a way that will inspire everyone. While you can use a simple screenshot, you can also take things to an entirely new degree with a PSD website template. This particular bundle includes seven different styles for you to take to your benefit. From iMac, Macbook and single page to two iPhones and cropped Macbook, the options are there, at your fingertips. You can also edit the background by keeping it transparent or add color or even image. Make things the way you fancy and showcase your works in the best possible light.

More info / Download

Super minimal, clean and striking device mockups which you can use for displaying the flexibility of your website. In the kit, there are twelve different variations, each original, creative and attention-grabbing. Moreover, you can choose between Macbook, iPad and iPhone. Simply drag and drop your creatives and let the desired template display them instantaneously. Other goodies include eleven shadow overlays, customizable background and six main color options. You now have a complete solution to make a presentation that will turn heads. If keeping things simple and minimal is your cup of tea, this mockup package is perfect for you.

More info / Download

A stunning, modern and user-friendly website mockup template with six different isometric views. In case this is the style of presentation that you would like to sport for your online presence, make it happen in close to no time. No need to spend countless hours on how you would like to showcase your work when a template can make it happen in a snap of a finger. Just slide in your designs and that is pretty much it. You can add multiple page layouts to showcase your entire website, as well as edit the background. In short, the final product will be a real masterpiece, helping you win over new clients.

More info / Download

A complete collection of various website mockups featuring different devices. You can now push the flexibility of your page on iPhones, iMacs, Macbooks and iPads. Also, you will find fourteen different PSD scenes of 4000 x 2500 px dimension. You can employ these for all sorts of different presentations that go beyond website design showcase. Other features include shadows and light adjustment, smart objects (just drag and drop), 50% zoom and more. You can also change the background color and enjoy very detailed customization. With super swift editing and improving, you can have multiple different presentations readily available in a matter of minutes.

Another fantastic alternative to all the other website mockup templates, where you look for a device to display your design. In this case, you get twelve different PSD files included in the kit, dimensions 4000 x 2500 px. Objects and shadows are separated for flawless editing. Have in mind, this bundle of mockups comes with instructions which will help you on your journey to realizing striking and photo-realistic display of your page design. Thanks to the smart object layers, you do not really need to invest much time and energy into activating these mockup layouts. Just slide in your image and see it in action in an instant.

Avire

Avire is a highly customizable one-page template that features a flat style design. It is simple to use and modify to fit your needs. With a few tweaks here and there, it can definitely meet all your requirements.

Download

Hexal

Hexal is a unique portfolio template that is guaranteed to leave lasting impressions to your website visitors. It is definitely perfect for web designers, graphic designers, and anyone with a creative mind.

Textured Design

You can use this free PSD file for both personal and commercial purposes. It is a one-page portfolio web template that caters to creative people.

Download

Switch

Switch is a bootstrap 3D multipurpose web template, which means it can become whatever you want it to be! It serves as a great one-page template that offers various solutions for all your needs.

Download

Kappe

Kappe is a creative multipurpose web template. With its grid-based design, you can convert into a personal blog or a business web page with a few mouse clicks.

Download

Notify

Notify is the best app landing page around the web. Its sleek and modern design will make sure that your message is conveyed just as you’ve imagined it.