Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 17 2014

03:20

August 22 2011

07:00

How To Create a Blog Theme Concept in Photoshop

In the next few tutorials posts we’re going to go through the process of building a WordPress theme, starting today with the initial design concept in Photoshop. Follow this step by step walkthrough of the creation of the design concept for my Ticket Stub theme, which is based on a movie review type blog. We’ll create a full page design ready for coding up into a fully working website.

The theme we’ll be building over the next couple of posts is named Ticket Stub. It’s a clean and simple blog layout that’s set up as a movie review blog, but is generic enough to be used for any kind of website.

View the large scale blog theme concept

We’ll start by creating the background texture tile. Open up Photoshop and add a spot from a subtle grunge brush in the centre of the document.

Grab the rectangular marquee tool and draw a square selection somewhere in the centre. Invert the selection and delete out the excess. It’s trial and error to find a section that repeats without any obvious edges.

Reduce the opacity of the texture to around 30%, then see if it repeats correctly by duplicating the square to cover a larger area. Use the Clone tool to delete any unwanted particles in the original file.

With the original texture file selected go to Edit > Define Patterns to save the swatch. Fill the background of your web design file with this newly created pattern file.

Outline a 960px centre area in the document and fill it with white. I use the marquee tool by right clicking a selection and choosing Transform Selection. In the top bar you can then enter specific dimensions.

Add a very subtle Drop Shadow effect to the content rectangle. I’m using settings of 6% opacity, 0 distance, 0 spread and a size of 10px. Also give the layer a very fine 1px grey stroke to help define the edge.

The theme’s default logo can be added to the space in the header area. Fill a rectangle with a deep red.

Add a Gradient Overlay using the Overlay blending mode. Reduce the opacity in order to tone down the impact of the gradient to leave a subtle change of colour.

Add a 1px Stroke using a darker shade of red, then add an Inner Glow effect using a lighter shade. Adjust the options so the Inner Glow has a normal blending mode, 100% choke and 1px size.

Use the subtle grunge brushes to add a textured overlay to the logo using both light and dark red tones.

Add a spot of text to the logo. Here I’m using the American Typewriter font, with size and tracking adjustments on the word ‘Stub’.

Paste in a couple of star graphics from Illustrator and add a subtle drop shadow to the text to finish off the logo with a retro style cinema ticket stub appearance.

Add a couple of icons to the upper right area of the header for RSS and Twitter links. All text will be set in Helvetica in this design, while a deep red has been selected as the global link colour.

Use a guide to highlight a margin from the edge of the content area, then begin fleshing out a sample blog post with header and post image. Set the header to uppercase to help add typographic emphasis to these elements.

Generic dummy text can be used to represent the introductory content for the post. Set up the font at a legible 14px with a generous line height of around 24px to help with readability. Black on white would be way too contrasting, so a mid to light grey is selected for the body text.

Blog posts also have snippets of information that are displayed with every post. These can be included in their own panel. Draw a grey rectangle across the width of the column and add a 1px stroke of the same colour.

Set up an Inner Glow effect using the Normal blending mode, white, 100% choke and 1px in size to create a double border effect.

Use the same body copy text styling to add the date, category information and read more link for this sample post. Don’t forget to highlight links in the red link colour.

The date and category can be grouped together, separated by a little star graphic, while the read more link works well aligned to the right to suggest that it leads further.

Group all the elements that make up a sample post, then make a duplicate and position it underneath. Adjust the title to something much longer to plan how a longer sentence would wrap.

Use the same panel styling used in the post excerpts to create button elements for the older and newer post links.

The same button styling can be used in the sidebar to allow for more prominent links to the blog pages and categories. Align the text to the right in these elements.

Create a search bar using a finely outlined rectangle, then replicate the style of the icons in the header with a grey circle.

Use an Elliptical marquee as the base for a magnifying glass icon. Right click and select stroke to give the selection a 2px white outline, then finish off the icon with a handle using the Line tool.

It’s important to provide consistency throughout any design, using the same link colour, button styling and similar icon designs.

A short About excerpt in the sidebar helps fill out the empty space and provides another link through to other areas of the website.

The sidebar currently blends into the content area a little too much. Draw a light grey rectangle down the right side of the design to enclose all the sidebar elements. This helps the content with its brighter white background stand out with more prominence alongside the slightly darker grey.

Finish off the design with a back to top link, again creating a little icon based on the same style as those in the header.

This leaves our concept for our blog theme homepage complete. Next time we’ll begin chopping up the design and creating it as a coded webpage with HTML and CSS.

View the large scale blog theme concept

April 27 2011

04:21

Volvo – Superb Luxury

“Just like fine luxury goods, this design feels handcrafted and durable enough to stand the test of time,” says Peter Horbury, Vice President Design at Volvo Car Corporation. “We will compete with the best with our unique kind of Scandinavian Design. It is unmatched in performance and technology, but without superficiality or complication.

tumblr_ljuvxklE7D1qj4jvgo1_1280

“When we set out to create this concept, one of the first things I told the designers was not to draw cars for a week. With a pencil, one automatically draws hard lines, and that’s not what we wanted here. Instead I asked them to design sculptures. That way, we brought fluidity and a sculptural gracefulness to the Concept Universe. We reduced the number of lines, and took away all visual noise, to make it as simple and elegant as possible,” says Jonathan Disley, Strategic Design Manager Advanced, at Volvo Cars. “Without the edges, all lines are infinite, marking distinctive inspiration from Scandinavian furniture design as well as Chinese writing. The Concept Universe is entirely built by hand and took a strenuous 8000 hours to finish.

volvo-concept-universe-fb-01

volvo-concept-universe-fb-02

volvo-concept-universe-fb-06

volvo-concept-universe-fb-11

volvo-concept-universe-fb-05

volvo-concept-universe-fb-04

volvo-concept-universe-fb-03

There is a growing appreciation for the ingenious blend of design and technology among luxury car buyers, and Concept Universe offers a fascinating contrast between traditional craftsmanship and highly advanced features. The driver’s in-command environment has intuitive controls and a touch-screen that approaches the hand when the driver reaches towards it. There is also a full-colour 3D head-up display, originally developed for military aviation, presenting the speedometer, navigation system and other important information directly on the windshield, without requiring the driver to look away from his or her viewpoint.

Volvo Concept Universe on Facebook

Volvo designers’ blog

Volvo Cars on YouTube

Volvo Car Corporation

Sponsored by

Made By Tinder

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)



Volvo – Superb Luxury

December 08 2010

14:34

35 Stunning Examples Of Concept Art

Advertisement in 35 Stunning Examples Of Concept Art
 in 35 Stunning Examples Of Concept Art   in 35 Stunning Examples Of Concept Art   in 35 Stunning Examples Of Concept Art

Here is another post for all concept art lovers. Here we are presenting some examples of concept art which shows the creativity of artists in creating an illustrated design for something which doesn’t exist so far. Many of the artworks presented below are Photoshopped while some are designed using the traditional means such as oil paints or pencils. We hope that you will like this collection and these examples will inspire you and let your imagination go wild!


Darkwatch concept art 2 by francis001

Dx Conceptart4 in 35 Stunning Examples Of Concept Art

Ancient Falls – PHB concept by ColdFlame1987

Dx Conceptart1 in 35 Stunning Examples Of Concept Art

Albesila concept 1 by Artozi

Dx Conceptart2 in 35 Stunning Examples Of Concept Art

TR concept by velvetcat

Dx Conceptart6 in 35 Stunning Examples Of Concept Art

Concept Church by Hawk4

Dx Conceptart7 in 35 Stunning Examples Of Concept Art

Terminator V by Tarrzan

Dx Conceptart10 in 35 Stunning Examples Of Concept Art

Creature of the Oasis by Tarrzan

Dx Conceptart11 in 35 Stunning Examples Of Concept Art

Trainwreck Falls by Tarrzan

Dx Conceptart12 in 35 Stunning Examples Of Concept Art

Concept-Art-Guardian by Donmarco92

Dx Conceptart13 in 35 Stunning Examples Of Concept Art

Vernoa by Djahal

Dx Conceptart14 in 35 Stunning Examples Of Concept Art

Deli by kerembeyit

Dx Conceptart15 in 35 Stunning Examples Of Concept Art

Netherworld Archipelago – the Capital By Jesse van Dijk

Dx Conceptart17 in 35 Stunning Examples Of Concept Art

Soulhunter By Andrey Lazarev

Dx Conceptart18 in 35 Stunning Examples Of Concept Art

The Octopus World By heri irawan

Dx Conceptart19 in 35 Stunning Examples Of Concept Art

The Mercenary By Rui Cheng

Dx Conceptart20 in 35 Stunning Examples Of Concept Art

Sea Rising By Blaz Porenta

Dx Conceptart21 in 35 Stunning Examples Of Concept Art

Tom Thumb By Meslin Yamina

Dx Conceptart22 in 35 Stunning Examples Of Concept Art

Learning to Fly By Adrian Baluta

Dx Conceptart23 in 35 Stunning Examples Of Concept Art

Diablo III concept art By mediaatmidnight

Dx Conceptart24 in 35 Stunning Examples Of Concept Art

Two Wings and a Prayer By Ben Hartnett

Dx Conceptart25 in 35 Stunning Examples Of Concept Art

Magslag By Alexander Tooth

Dx Conceptart26 in 35 Stunning Examples Of Concept Art

Freedom By Zsuzsa Tasi

Dx Conceptart27 in 35 Stunning Examples Of Concept Art

Dragon Riders by moonworker1

Dx Conceptart28 in 35 Stunning Examples Of Concept Art

Star Wars: The Force Unleashed concept art By beastandbean

Dx Conceptart29 in 35 Stunning Examples Of Concept Art

The Mermaid (commission) By Cris de Lara

Dx Conceptart30 in 35 Stunning Examples Of Concept Art

Random Concept 1 by Guesscui

Dx Conceptart31 in 35 Stunning Examples Of Concept Art

Shantytown by Tarrzan

Dx Conceptart32 in 35 Stunning Examples Of Concept Art

The Monster in my closet By Davide Tosello

Dx Conceptart33 in 35 Stunning Examples Of Concept Art

Powerful fire By Cindy de Andrade Avelino

Dx Conceptart34 in 35 Stunning Examples Of Concept Art

Hounds of Tindalos By James Wolf Strehle

Dx Conceptart35 in 35 Stunning Examples Of Concept Art

Cow – McDonalds By Carlos Nieto

Dx Conceptart36 in 35 Stunning Examples Of Concept Art

HL2E3 Concept Art.2–screenshot By jmlesjeuxvideo

Dx Conceptart37 in 35 Stunning Examples Of Concept Art

The Forgotten Atlantis by Firedudewraith

Dx Conceptart38 in 35 Stunning Examples Of Concept Art

Atlantis: Scavengers by DaakSM

Dx Conceptart39 in 35 Stunning Examples Of Concept Art

Aurion Concept Illustration By K. Beyit

Dx Conceptart40 in 35 Stunning Examples Of Concept Art

November 15 2010

07:00

Design a Textured Outdoors Website in Photoshop

In part one of this website build project we’ll go through the process of creating a detailed concept for an outdoors site. The design is based on a range of textures and a mix of blue and greys to create a stylish and sophisticated website for ‘Pinewood Forest’.

Pinewood Forest web design concept

View the Pinewood Forest design concept

Pinewood Forest is a fictional area of natural beauty and visitor attraction. The aim is to mock up a web design to showcase the forest, what it has to offer and inform visitors of upcoming events. We’ll be creating the design based on a sophisticated style with subtly textured elements and serif fonts. The background will feature a large static background image that allows the main content to scroll over it, and the content itself is broken up into key focus areas with photography used to draw in the user.

In this first part of the site build we’ll go through the Photoshop stage and mock up the design concept for the homepage, stay tuned for next week’s tutorial when we’ll finish off the homepage into a fully coded webpage in HTML and CSS.

Begin by creating a new document. I tend to create a canvas size at a typical large monitor resolution. With this design featuring a large background image we want to accommodate even the larger resolutions used by 24 or 27 inch monitors.
Transform a marquee selection to 960px and drag guides to identify this portion of the page, this will be where the main content will be contained.

Import a photograph for use as the large background image and scale to fill the majority of the screen, but leave a thin margin at either side. Drag a guide to identify a typical fold line for a large monitor resolution, say around 1920px. This particular image I have downloaded from ThinkStock, which was also the source of the range of blue and grey tones.

Add a Layer Mask to the photograph and use a range of Watercolor brushes to fade out the edges. Drop the opacity of your brushes to create a cool layered and textured appearance where the image blends into the background.

Create a logo for the forest and place it centrally in the header area of the page. Adjust the sizing of the fonts so the focus is on the word Pinewood, but align the two words by increasing the tracking on the word forest. A mix of sans-serif (League Gothic) and serif (Clarendon) works really well to combine the styles of modern and traditional.

Add a Drop Shadow and Gradient Overlay layer style to the logo. Both effects add depth by lifting the logo from the page and giving it more prominence. Keep the contrast between the gradient and the opacity of the shadow low to maintain subtlety.

Type out some navigation items to sit either side of the logo to form a menu. The serif Georgia font is a web safe alternative to the Clarendon typeface used in the logo, without needing any special web font treatment. The tracking in the design concept can be matched with CSS letter-spacing.

Draw a large rectangular selection to outline the content area within the 960px guides. Fill this rectangle with a light grey colour selection from the logo’s gradient.

Add a subtle Noise texture (Filter > Noise > Add Noise) of around 2.5% to give a tactile feel to the content panel.

CMD-click the layer thumbnail of the content panel, then right click and select Transform Selection. Adjust the width and height to 40px smaller in size and fill the selection with white. Add a subtle Drop Shadow to lift the white panel from the grey border.

Use a selection of paint roller brushes to rough up the edges of the grey border by painting onto a layer mask. Load the selection of the white panel and fill this area black on the layer mask to render it transparent, then drop the opacity of the grey border to around 60% to allow the photographic background to show through.

Import a photograph to use as a background of the main feature area on the page. Draw a thin rectangular marquee selection to match the content panel, inverse the selection and delete out the excess from the photograph.

The colours of the photo don’t really match the overall scheme of the website so make some adjustments with the Curves tool. Bend the Red and Green channels into very slight ‘S-bends’, then tweak the blue channel with an inverted ‘S’ shape.

Decrease the saturation of the image to tone down the colours, the result is a colour cast on the image that matches the cool blues and greys of the surrounding design.

Use one of the paint roller brushes from Colorburned to paint in a background for some text in the feature area.

Tweak the size and tracking of the title text to create a cool typographic header, then set the following paragraph as typical 14px body text.

Similar layer styles to those used on the logo will help boost the impact of the header. Add the grey to white gradient overlay and subtle drop shadow.

A clear call to action button will give casual browsers clear direction of where to go next from the homepage. Draw a thin rectangle and fill it with a blue colour swatch from the scheme. Add a subtle noise filter to rough up the button a little, then use a 1px pencil setting on the Eraser tool to clip a little notch in each corner.

Add an Inner Glow to the button using a slightly darker shade of blue. Set the options to Normal blending mode, 100% opacity and adjust the size to suit. Also give the button a 1px stroke using a slightly lighter shade of blue.

Finish off the button with a clear and descriptive message, them make sure all the elements of the feature area are neatly aligned.

Begin filling out the content area with body copy. Set the intro heading in a slightly larger font size and allow it to span across the full width. Align the smaller body copy into a two column layout, one wide column for the main content and a smaller column for the sidebar. Links will also need mocking up to show how they will be identified. Colour specific parts of the text with a lighter blue and add an underline.

In the sidebar we’re going to make three mini-feature areas that would link off to other areas of the site. Each one will include an image, title and short paragraph. Add a textured background using the paint roller brushes then clip a map image down to size within this textured area.

Use the paint roller brushes to create another background, this time using the darker blue to create a base for the title text. Trim off any overlapping areas to match the edge of the image.

Add a short title to the header graphic and give it the same treatment as the text in the feature section.

Group all the elements that form the aside feature in the sidebar, then duplicate the group and edit the content to form three separate feature areas.

Underneath the text in the main column we’ll add an ‘Upcoming events’ section. Use the already established font styles from the header and body text to lay out the content, then create a small date area using a selection from the grey border.

Each event is laid out with a date icon, title, more info link and short description. We can plan at this stage how this layout could be coding up with the relevant HTML elements, but you’ll have to wait until next week to see the step by step!

Pinewood Forest web design concept

Here we have the finished concept. Next week we’ll go through the process of coding it up with HTML and CSS. Remember we’ll be keeping that large background image static so the outer portion of the image won’t be seen by most monitor resolutions. This also means all the centre content will have to scroll over the background image, so we’ll be calling upon lots of PNG-24 graphics to use their alpha transparency.

October 25 2010

07:00

Create a Stylish Portfolio Site Design in Photoshop

This first of a two part tutorial series will go through the process of building a simple and stylish portfolio website design. We’ll begin by designing the concept in Photoshop and fleshing out every little detail before cutting up the design and building it all into a working website next week.

Design portfolio concept

The design we’ll be building is a simple single page website that’s made up of basic header with a short introductory sentence, a series of portfolio items each with a title and description, then the page ends with a stylish contact form in the footer. The idea for the portfolio items is to show the letterbox style thumbnail, then use some jQuery magic on the finished site to expand the letterbox to show the whole graphic, but you’ll have to wait until next week for that!

View the portfolio design concept

Begin by opening up Photoshop. I tend to create document that resembles a typical screen resolution of around 1680px width. Fill the background of the document with a base colour, such as a mid-blue.

Textures help give a tactile and realistic feel to a website design. Use the Noise (Filter > Noise > Add Noise) filter to add a subtle 2.5% amount of noise texture to the background.

We’ll also add a cool grid like repeating pattern to the design for a touch of visual interest. Create a new 24x24px document and draw a grid outline as shown with the Pencil tool. Go to Edit > Define Pattern to save this swatch into the pattern palette.

Fill a new layer with the recently created pattern swatch, then change the blending mode to Multiply and lower the opacity to tone down the effect so it subtly blends into the background.

Go to Edit > Select All, then right click on the selection and choose Transform Selection. In Photoshop’s top back, right click and change the units in the width(W) box to Pixels and change the size to 760px. Drag out guides to each edge and the centre of this selection.
Begin creating an introductory header by typing out the title of the portfolio. Use a subtle Drop Shadow to lift the text from the design. Then plan here is to use CSS image replacement to render the title, so the non-web font of News Gothic is used.

Draw a long thin rectangle to form the base of the title ribbon. Use the Polygonal Lasso tool to clip out triangular selections from each end.

Add a Gradient Overlay to fill the ribbon with dark to light green tones running vertically, then manually add a thin highlight across the top edge on a new layer. Fill this highlight selection with white and change the blending mode to Soft Light.

Use some Photoshop brushes to paint in some subtle textures over the ribbon to add realism and authenticity. This Subtle Brush Set from Function does the job perfectly.

Load the selection of the ribbon layer by CMD+Clicking on the layer’s thumbnail. Inverse the selection (CMD+Shift+I) then delete out the excess from the texture overlay layer. Change the texture layer to Overlay at 7% to tone down the effect until it’s barely visible.

Add a Drop Shadow layer style to the ribbon layer, then in the layers palette right click the effect and select Create Layers. This will convert the Drop Shadow into a layer of its own, which can then be manipulated with the Warp tool. Press CMD+T to Transform, then right click and select Warp. Bend the outer edges downwards to give the impression of depth and three dimensions with clever shading. Reduce the opacity of the shadow layer to tone down the effect.

Finish off the ribbon by typing out your name. Here I’m still using the News Gothic font, along with a subtle Drop Shadow. A couple of star graphics were quickly imported from Adobe Illustrator to finish off the header.

The introductory sentence is nothing more than text with a subtle drop shadow. The Helvetica font is certainly web safe, and the shadow can be replicated with CSS3 so this section will be coded manually in the final design. Mock up the text in Photoshop to plan out the alignment and line height.

Paste in the first of your portfolio pieces and scale it to fit the width of the design. Remember to hold the Shift key while scaling to keep the angles constrained.

The idea for these portfolio items is for them to expand to show the full graphic on hover as a little touch of fancyness. This can be replicated in the Photoshop document with a quick layer mask, which will show the narrow version while keep the original intact.

Use a duplicate of the top ribbon banner to create a smaller sub-heading. Clip off the edge on the left side and add an extra highlight line, then type out a brief description of the portfolio item in Helvetica. Match the line height to the subtle grid background.

Fill out the concept with a few more portfolio items. If you’re following this tutorial to create your own portfolio you might want to include a few more design samples, but the key is to show a fairly small number of items that show your best work.

Paste in another little star graphic to signify the end of the portfolio section. Blend this into the design with a few Layer Styles. A Color Overlay using a slightly darker shade of the background and an Inner Shadow create a cool inset appearance.

Use the same text styling as the introductory sentence to create a closing message, then lay out the contact form fields and labels with basic white graphics. Use the guides to keep everything aligned.

Add a Gradient Overlay and Stroke layer style to blend the form fields into the theme of the design. A dark to light vertical gradient can help create subtle shading on the input fields to give an inset appearance.

Use a copy of the banner graphic to create a submit button. Clip off the ribbon type ends and follow the highlight onto the edges to form a typical button graphic.

Design portfolio concept

Take a step back to check over the design and tweak the details. The design concept is all ready for chopping and coding up into a working website. Come back next week when we’ll cover the HTML and CSS aspects, and get those fancy image hovers working with some progressively enhanced jQuery.

View the portfolio design concept

February 03 2010

06:38

Modern Bicycle Concepts That Will Blow Your Mind

Transportation Designers have always tried to push the envelope when it comes to speed, style and grace. The world of streamlined bicycles is driven by all of these same principles. However, several concept bikes have begun to look like they are screaming around corners even when they are sitting still. Here are some super sleek & stylish modern concepts that are beautiful and intriguing.

Pulse

This vehicle is part fitness membership, part fashion statement, and part Kyoto-pact contribution.

Designer: Teague

Screen shot 2010-02-03 at 12.22.29 AM

Screen shot 2010-02-03 at 12.23.01 AM

Screen shot 2010-02-03 at 12.23.26 AM

Chris Boardman – Olympic Cyclist, Concept Future Bike

A very light and strong carbon fiber bike that uses a clip on iPod-like type device to display maps, speed, warnings, and communication.

Designer: Lewis Rowe

Screen shot 2010-02-03 at 12.35.08 AM

Screen shot 2010-02-03 at 12.35.20 AM

Screen shot 2010-02-03 at 12.35.29 AM

IBike

Has unique features, like a place for your iPod, a built in lock & spot to plugin headphones. Plus has a super sleek, stylish design.

Designer: Reindy Allendra

Screen shot 2010-02-03 at 12.45.35 AM

Screen shot 2010-02-03 at 12.46.03 AM

Screen shot 2010-02-03 at 12.45.51 AM

WATT

Uses a unique iPhone navigation setup on the handlebars with buttons to control it as well as a different style of spoke rims and ultra light weight construction.

Designer: Jerome BLANCHARD

Screen shot 2010-02-03 at 12.51.39 AM

Screen shot 2010-02-03 at 12.51.53 AM

Screen shot 2010-02-03 at 12.52.03 AM

eco // 07

Compactable Urban Bycicle designed to save space when it is being transported or it is not in use.

Designer: Victor M. Aleman

eco3

eco2

eco1

B1k Concept Cycle

Sculpted as a race bike, it features a chainless drivetrain, carbon fiber construction and scant few details on the rest of the design.

Designer: Peugeot

puegot-concept-bicycle1

puegot-concept-bicycle2

puegot-concept-bicycle3

Sponsored by

Made By Tinder

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Modern Bicycle Concepts That Will Blow Your Mind

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl