Takeaway: In this tutorial, Ryan Boudreaux shows you the steps and settings to create a minimalist web design layout in Photoshop.
Minimalism in art and design began post World War II, and in particular was prolific largely in American visual arts, design, and architecture with rapid growth seen in the 1960s and early 1970s. With respect to web design, we find many examples of minimalist usage and the trend seems to be growing every day. In this tutorial, I will be using Photoshop CS5 Extended; however, all of the steps can be utilized in most versions of the Adobe Photoshop series.
What defines a minimalist website?
A minimalist website would be typified by a lack of unnecessary colors, images, shapes, textures, or any distracting elements. Rather, the focus is on function, where quality in a simple design overrides quantity of content. The often stated phrase “less is more” takes precedence, where the web design is reduced to a limited set of necessary elements.
What are “necessary elements?”
Do you ever go shopping and ask yourself, “Do I need this item or do I want this item?” You first have to separate the “wants” from the “needs”, and once you get your “needs” list pared down, then this becomes the short list and is a good starting point for your necessary elements.
The necessary elements might include:
- The name of the site or organization
- Short navigation area with only four or five links to sub-pages
- Single graphic, image, and possibly a gradient background
- One or two short paragraphs of recent content
- Footer with copyright, navigation, link to disclaimers, social networking links.
Open a new document in Photoshop
#1 Create a new Photoshop document with dimensions of 1020px wide by 1020px height as shown in Figure A:
Create the background layer
#2 Next, unlock the background layer by double-clicking over the active layer and giving it a name of “Background” and then click OK; this will enable the layer to be editable, as shown in Figure Bbelow:
#3 Next, select the Gradient tool and then set the Foreground color to #b9c7c7 and the Background color to #e0e9e9. Then, set the Gradient type as Radial and drag the Gradient tool on the canvas as displayed in Figure C:
Start the location of the line within the bottom-left of the top right quadrant and move toward the top right corner, releasing to produce the gradient as displayed in Figure D:
Establish the Header Section
#4 Set a vertical and horizontal guide at 50px from the left and top edges, respectively, as displayed in Figure E. This will be our guide for setting the text areas.
#5 Next we will create the header text content using the Horizontal Type Tool, and then type in the website name and a sub-heading slogan or catch phrase. The following settings were used for creating two independent Horizontal Type Tool layers for the header text:
“Web Site Name”
- Font: Campbell
- Font Size: 32px
- Font Weight: Regular
- Anti-aliasing: Strong
- Color: #333939
“The sub-heading slogan or catch phrase”
- Font: Tahoma
- Font Size: 18px
- Font Weight: Regular
- Anti-aliasing: Strong
- Color: # 466d6d
#6 Now, using the Nudge Tool, align the two text layer areas to the top and left guides for correct placement on the canvas, as displayed in Figure F:
Adding in Navigation
#8 Add in a new horizontal guide at 150px from the top as shown in Figure G:
#9 After that, create a third Horizontal Type Tool Text layer starting at the 150px horizontal guide, and then, add in the following navigation text: “About”, “Blog”, “Products”, “Services”, and “Contact”, dropping two line returns between each text addition, with the following settings:
- Font Family: Tahoma
- Font Size: 22px
- Font Weight: Regular
- Anti-aliasing: Strong
- Color: # 4b6262
#10 Nudge the new text layer to align with the vertical guide to the left and the horizontal guide at 150px; the result is displayed in Figure H:
Adding in the Search Bar and Submit Button
#11 Creating a search bar, we will utilize the Rounded Rectangle Tool with a radius of 7px and create a shape that is approximately 160px wide and 25px tall. But first, let’s drop in a vertical line positioned 100px inside of the right edge of the canvas, or at 920px on the canvas. We will align our search bar with the bottom edge touching with the horizontal 150px guide and the right edge aligned with the 100px vertical alignment. We will also add in an Inner Shadow with the following settings:
- Blend: Multiply
- Opacity: 35%
- Angle: 30%
- Use Global Light: Checked
- Distance: 1px
- Choke: 2px
- Size: 3px
- Contour: Default
- Noise: 0%
The search bar rounded rectangle is shown in Figure I:
#12 Next, we will make the submit “Search” button, utilizing the Rounded Rectangle Tool again with the following settings:
- Height: 25px
- Width: 40px
- Radius: 7px
Then add a gradient overlay with the following settings:
- Blend Mode: Overlay
- Opacity: 100%
- Style: Linear
- Angle: -90%
- Scale: 100%
- Custom Gradient Color Settings
- Foreground Color: #598181
- Background Color: #b0e9e7
Make sure the button layer is above the search bar and nudge the alignment as displayed inFigure J:
#13 Next, we will add in the textual content layer using the Horizontal Type Tool (T) and align it over the search bar with the following settings:
- Text: “Search…”
- Font: Tahoma
- Font Size: 18px
- Font Weight: Regular
- Color: # e0e9e9
#14 Add in a white arrow shape using the Custom Shape Tool (U) and position it over the submit button layer; I selected Arrow 6. Then center align it over the button area as shown in Figure L:
Banner image area
#15 Next, we will construct a banner image background area which will define space on the design for either a static image or a set of rotating images, which can highlight current, relevant content. We will name it “Image Bg”. Before we create the shape, let’s add in a few more guidelines. The first is a vertical guide set at 200px, and the second is a horizontal guide set at 200px. Next, select the Rounded Rectangle Tool (U) and create a rectangle with the following settings:
- Width: 600px
- Height: 400px
- Radius: 7px
Then, apply a stroke gradient layer to the rounded rectangle with the following settings:
- Stroke Structure:
- Size: 3px
- Position: Inside
- Blend Mode: Normal
- Opacity: 100%
- Fill Type: Gradient
Color Stops:
- Foreground: #90a9a9
- Background: #e7ebef
- Style: Linear
- Align with Layer: Checked
- Angle: 0%
- Scale: 100%
The top section of the canvas should look like that shown in Figure M:
In the next part of the tutorial, we will add in a sample feature image to complete the banner image area. We will also add in several feature content titles and paragraph block areas just below the feature image area, and finish with creating a footer area at the bottom of the canvas.
Source:http://www.techrepublic.com/blog/webmaster/tutorial-create-a-minimalist-web-design-layout-using-photoshop/1250
Powered by Qumana
