#WEBDESIGN IN PHOTOSHOP HOW TO#
#WEBDESIGN IN PHOTOSHOP FULL#
#WEBDESIGN IN PHOTOSHOP FREE#

The original colour doesn’t matter too much as we’ll be styling it up in the next stage.ĭouble click the layer and add a range of layer styles, including a grey-white gradient, a thin grey stroke and a soft inner shadow. Use the Rounded Rectangle tool to draw a box in the sidebar. The title links should stand out to the user as something clickable, so change their colour to give a visual clue. Split the column into another two columns and draw up a selection of example post entries. Alter the sizing and leading to give digestible and easily readable passages of text.īelow this main content area could hold an area to display the latest blog posts. Use the Type tool to add some dummy content. On the left we’ll have a main content panel, whereas the right will hold a thinner sidebar. Split the mid section of the page into two columns with guides in relation to the grid lines. Underneath the main header, draw another selection and fill with a grey-white gradient. This adds that little extra detail that lifts the element from the page. Position a laptop into the featured area (a range of examples can be found here), this fits in well with the nature of the fictional company, and makes a great focal area to display examples of work on the laptop screen.Įmphasise this focal point with a radial gradient emitting from behind the laptop. Use this space to place a snappy intro title in a custom font that matches the company branding.Ĭontinue fleshing out the introductory content, but this time use Arial or Helvetica as the font so that the text can be set in plain old html, without any image replacement techniques. The feature header is a great place to introduce the website, with the vibrant background colour it is given main focus to the user.

Use the Type tool to create the text of the main navigation, set the type in a mid-grey while using a slightly darker version for the active link. Add a gradient overlay to match the feature header colours, then create a very soft inner shadow. Paste in the company logo, position on screen according to the grid, then add some styling through the layer style options. Go to Filter > Noise > Add Noise to produce a simple texture, then set the blending mode to Multiply and reduce the opacity to suit. With the header area selected with a mask press CMD+SHIFT+C to Copy Merged, then paste on a new layer. Subtle touches of texture can really bring a design to life. Also add a subtle inner shadow to add depth to the design. On a new layer draw a selection, then add a gradient overlay with a selection of two vibrant colours. Next, draw the main header area where the featured content will be placed. Double click the layer to open the layer styles and add a Gradient Overlay from grey to white running vertically.

#WEBDESIGN IN PHOTOSHOP FULL#

Draw a selection across the full width of the document and fill with white. Place guides at a 960px width in the centre of the document and create a basic grid to place the page items against.īegin with the creation of the header bar. Planning out a wireframe also helps develop a hierarchy and gives an insight into the best positions for key elements of the design.Ĭreate a new document in Adobe Photoshop, I tend to make the size of the artwork similar to that of a common widescreen monitor to give a good representation of the overall look of the site.

#WEBDESIGN IN PHOTOSHOP FREE#

Key features include horizontal bands to separate the content into specific areas a colorful header area introducing the site a friendly welcome message with examples of work two-column main layout and a resource filled footer.Ī good start with any design is to sketch out the plans on paper, the free reign of the pencil helps flesh out the rough layout with ease. Taking inspiration from various modern website designs, we’ll produce this clean and crisp website layout.

#WEBDESIGN IN PHOTOSHOP HOW TO#

How to design a Clean logo in photoshop 2021 - Beginner friendly

Webdesign in photoshop