Today you will learn how to develop a concept in Photoshop. Follow these step-by-step instructions for creating a design concept for my Ticket Stub theme, which is based on a movie review blog. We will create a complete page design, ready to be turned into a working site.
The theme that we will create in the next few posts is called Ticket Stub. This is a clean and simple blog layout, ideal for a movie review site, but it’s versatile enough to be able to use it on any kind of site.
View full-size blog theme concept.
We will start by creating a tile for the background texture. Open Photoshop and add a spot of fine grunge brush in the center of the document.
Translator’s Note: The link indicated by the author is not working. I suggest using this brush.
Choose a tool Rectangular area (Rectangular Marquee Tool) and draw a square selection somewhere in the center. Invert the selection and remove the excess. By trial and error, you need to find a section that repeats without visible corners.
Decrease opacity (Opacity) textures up to about thirty%, then see if it repeats correctly when duplicating over a large area. Use the tool Stamp (Clone Tool) to remove all unwanted parts in the original file.
With the original texture file selected, go to menu PEditing> Define a pattern (Edit> Define Patterns) to save the pattern. Fill the background of the file with the design of the newly created pattern.
Circle area 960px in the center of the document and fill it with white. I use the tool The rectangular area (Rectangular Marquee Tool) by right-clicking on the selection and selecting Transform selected area (Transform Selection). In the top panel you can enter the exact dimensions.
Add a thin rectangle of content. Shadow (Drop Shadow). I use these settings – 6% Opacity (Opacity), 0 Offset (Distance) 0 Swipe (Spread) and the size (Size) 10px. Also add a layer of very thin gray stroke size 1px, to separate the face.
A standard theme logo can be added in a free space in the header area. Fill the rectangle dark red.
Add a Gradient overlay (Gradient overlay) using overlay mode (Overlay blending mode). Decrease opacity (Opacity) to soften the effect of the gradient and leave a soft color change.
Add a stroke size 1px darker red tint, then add effect Internal glow (Inner Glow) using a lighter shade. Adjust the settings so that Blend mode (Blending mode) was normal (Normal), tightening (Choke) 100%,size 1px.
Use a thin grunge brush to add a textured overlay to our logo using light and dark red tones.
It’s time to add text to our logo. Here I used the font American typewriter, with size and adjustments for the word “Stub”.
Insert a couple of stars from Illustrator and add a light shadow to the text to complete our logo in the style of a retro movie ticket.
Add a couple of icons for RSS and Twitter in the upper right part.
Translator’s Note: The link indicated by the author is not working, you can use this link.
All text in the template will be in font. Helvetica, while dark red was selected for the color of all links.
Use the guides to see the distance between the edge of the content area, then begin to complement the post-sample with a heading and a picture. Write the entire caption in upper case to add typographical emphasis to these elements.
The generated fish text can be used to present the intro content of the post. Set the font to be legible. 14px with enough line height around 24px, to increase readability. The black font of the main text on a white background contrasts too much, so soften it to light gray.
Blog posts also have fragments with information that is displayed in each post. It can be included in its own panel. Draw a gray rectangle across the width of the column and add 1px stroke of the same color.
Customize effect Internal glow (Inner Glow) using Blend mode (Blending mode) – normal (Normal), 100% tightening (Choke), size 1px, to create a double border effect.
Use the same text style to add a date, category information and a Read More link for this post. Do not forget to highlight the links in red.
The date and category can be grouped, separated with a small star icon, while the “Read more” link looks good if it is aligned to the right in order to offer to go to the full article.
Group all the elements to create a template for the post, then make a copy and place it below. In the headline, write something longer to plan how long sentences will be divided.
Use the same style of panels as in the short information about the post to create buttons for previous and future posts.
The same button style can be used for the sidebar to make links to pages and blog categories more visible. Align the text of these elements to the right.
Create a search bar using a thin-edge rectangle, then repeat the style of the icons in the header area with a gray circle.
Use the tool Oval area (Elliptical marquee) as the basis for the magnifying glass icon. Right click and select Perform a stroke (Stroke) to make the selection a white border thick. 2px, then finish the icon by drawing the handle with the tool Line (Line Tool)
It is important to maintain consistency throughout the design, using the same colors, button design and similar icon design.
A short excerpt about the blog in the sidebar will help fill in the empty space and add an additional link to other areas of the blog.
Now the sidebar is too merged with the content area. Draw a light gray rectangle to the bottom of the right side of the design to surround all elements of the side column. This will help the content with its brighter white background to stand out with greater visibility along with a slightly darker gray.
Finish the design with a return link to the top of the page by creating a small icon again, based on the same style as the ones in the header area.
This concludes our concept of the main page of the template. In the next article, we will begin to cut the template and create it as a page written in HTML and CSS.
View full-size blog theme concept.