For the record is an interesting site that features attractive infographics mostly built with CSS3.
I like the retro feel in conjunction with simple shapes and bright colors. The combination really comes together to complete the overall feeling of the design.
This design was featured on the 3rd September 2010 . It falls under the category of Music, and has a layout style of Other.
If you’d like, you can visit this site, or view all our other featured designs.
In our tutorial, we’ll be creating a shiny Pepsi can. For it to be convincingly realistic, a number of Layer Styles such as Gradients, Inner Shadows and Glows would be applied to a flat can shaped image.The resulting effect would be a 3D-like Pepsi can.
We start off with a document size of 750 x 850 pixels, a resolution of 140 dpi and a white background. Head on to the Tools bar and pick the Pen Tool (P), then outline a shape of a can as shown below. You may want to enable Grids (pressing Ctrl+’), as guidelines as well. Also, an actual Pepsi can was used as reference for the most part of the tutorial.
The final outline:
Right-click the can’s path and select Fill Path to add colour to the shape. I must add that, what the colour is, doesn’t matter at this point since we’ll be applying Layer Styles with a new set of colour.
The path has to be filled for Layer Styles to work or the layer would be indicated as empty.
Clear the path of the can shape with the Marquee Tool (M), by making a selection around the can and hitting Delete. Pressing Ctrl+D clears the selection. Duplicate this “can” layer for use later.
Now, double-click on the “can” layer to bring up the Layer Style dialog box.
Select a Gradient Layer Style and edit its Gradient and Style (select Reflected) as shown below:
Add an Inner Shadow Layer Style as well:
The final result for the “can” layer below:
Select the “can copy” layer duplicated earlier on and below the Layers Palette, click on the third icon from the left for a Layer Mask. Select a Soft Round black brush with an opacity of 80% and paint away some of the mask of the ‘can’ duplicate.To get straight lines when painting, hold the shift key when painting downwards. Also reduce the opacity of the brush when fading/erasing the central section of the mask.
To better blend the reflection we’re trying to create, go to Filter> Blur> Gaussian Blur and set the Blur Radius to 4.0 pixels. And we get the result below:
Create a new layer and name it “base.” We’ll now sketch out the base of the can with the Pen Tool as its been done below:
From the options within the Pen Tool, select the add Anchor Point Tool and add more points to the outline and adjust them with your mouse or directional keys on the keyboard until the lines are
acceptably smooth.
Below is the final outline:
Right-click within the outline (with the Pen or Anchor Point Tool still Selected), and select Fill Path for as ash colour to fill the base with. Select the Rectangular Marquee Tool and make a selection over the base and hit Delete to clear the base’s outline. Press Ctrl+D to clear the selection.
We have the result below:
In a new layer above the “base” layer, draw a rectangle with the Rectangle Tool (U) and fill with an ash colour – #e8eaeb.
We’ll create a brushed metal effect here with this popular technique. Go to Filter> Noise> Add Noise and set the Amount 32.5%. Also have Monochromatic checked.
Head on to Filter> Blur> Motion Blur and increase its Distance to 70 pixels.
Hit Ctrl+T to enter the Free Transform mode. Right-click, select the Warp Tool and bend the just slightly the rectangle.
Right-click the layer and select the ‘Create Clipping Mask’ to clip the layer to th “base” layer. Also hit Ctrl+E to merge the two layers as one. The layer should still maintain the name as “base.”
Add a Bevel and Emboss Layer Style with the parameters below:
Follow up with an Inner Shadow style:
Still on the Inner Shadow Layer Style dialog box, select Contour and adjust the points of its Mapping as shown below:
Add a Satin style and reduce its opacity to 18%, Distance to 15% and Size to 25%.
Adjust the Satin’s Contour Mapping to something of a slope.
Now we have a realistic looking metallic base for the can. Though the
steps used to achieve this was a bit tricky execute.
In a new layer, select a Rounded Rectangle Tool with its Radius set to 5px on the tool’s Options bar. Fill the shape with the colour #e8eaeb and clear its outline with the Marquee Tool.
Follow Steps 11 and 12 for a brushed metal effect for the “rim” layer.
Press Ctrl+T for the Free Transform tool – the Warp Tool to be precised. Bend the rim of our can just a little upwards from the points (handles).
For a more polished metal look, burn and lighten the areas of the rim with the Burn and Dodge Tools (O) respectively.
The result produces a shiny metal appearance.
We’ll also add an Inner Glow Layer Style to the rim as this gives the rim a softer edges without fading.
I downloaded a Pepsi logo and positioned it at the middle of the can with the help of Guides. Just enable them by pressing Ctrl+R and with the Move Tool (M), hold and drag the margins (rulers)of the workspace to align the Guides that appear from them.
Position the Pepsi Logo within the set Guides. That done, press Ctrl+; to clear the Guides and Ctrl+R to remove the rulers.
The logo mustn’t be perfectly round and so the Warp Tool (Ctrl+T) would be used to narrow its sides just a little. The aim of this to make the logo appear as if its bent over the curves of the can.
The result:
With the Burn Tool (Range set to highlights and Exposure at 25%), darken the sides of the logo.
The logo now blends with the darker shades of the can.
For the “text” layer use the Horizontal Type Tool (T), to type out the letters below. But before then, on the Type Tool Options bar, change the font to Myriad Web Pro and the foreground color on the Tools bar to white.
This font was chosen because, it came closest in replicating Pepsi’s. Anyway, hit the Ctrl+T to enter Free Transform mode and scale the text downwards only just slightly.
With the Rectangle Tool (for a new layer), draw and fill a small vertical rectangles with white.
Use the Rectangular Marquee Tool to clip off a part of the “o” letter and clear the selection (Ctrl+D).
Draw another small rectangle across the “o” for an “e”.
Pressing Ctrl+T for the Free Transform Tool, more specifically, the Warp Tool, change the Warp type from Custom to Flag and its Bend to 30% at the Warp Tool’s Options bar. The “e” is given the signature shape of the original Pepsi logo.
Right-click within the Warp and select Flip Horizontal to change the orientation of the Flag Warp to the way of how the original logo is.
Before merging all these shapes with the text, the text must be rasterized by heading to Layer> Rasterize > Type. Then press Ctrl+E to merge the shapes the “text” layer. And With the Free Transform Tool, rotate and scale the text for a flatter look.
Still within the Transform mode, have the text Skewed. That is, slanted forward on its axis.
Select the Burn Tool, with an Exposure of 10% and darken the lower plane of the text.
Type out the weight figures of the can in a new layer.
Have the text slanted with the Skew Transform Tool.
Below is the final result:
Create a new layer in between the “logo” and “rim” layers. Fill the layer with white using the Paint Bucket Tool (G) and then go to Filter> Pixelate> Mezzotint. Select the Type as Fine dots from the drop-down list.
Add a Motion Blur with a Distance of about 230 pixels.
From the Layers Palette, set the Blend Mode to Color Burn and reduce the layer’s opacity to about 45%. You’ll notice that the Blend effects does not show on the white areas of the image.
Use the Warp Transform Tool to bend the ‘brushed’ effects so as to give the can a more rounded appearance.
The can now has a convincing brushed metal appearance.
To make the brushed metal look not too distinctive, use the Eraser Tool (E) with a reduced opacity of 5% and carefully fade some portions of the brushed effects – do not erase completely.
The result:
Now to create a couple shiny portions of the can at selected areas. Select the Elliptical Marquee Tool and on its Options bar, choose ‘Add to selection’ to create multiple selections (in this case, flat
circular shapes).
Fill the selection with white using the Paint Bucket Tool and deselect the selection. Select the Smudge Tool at Strength of 50% and smear the white thinly across the can.
Use the Eraser Tool to fade edges of the smudge.
Create a new layer as the background layer and fill it with any colour; as the colour doesn’t matter for now. Add a Gradient Overlay Layer Style to the layer with the parameters below:
You’ll notice that the previous effects from Step 43 shows
through now and this is a good thing.
Erase certain areas of the background layer with the Eraser Tool’s opacity set at 80%.
Apply a Gaussian Blur to the layer with a Blur Radius of about 72.2 pixels.
Our Pepsi can now has an enhanced background. Something you’ll associate with an Ad for a product in a magazine.
We’ll now fade the brushed metal effect at some points with the Eraser Tool.
Create a “shadow1″ layer and select the Ellipse Tool to draw a flat circle. Fill it with black.
Add a Gaussian Blur to the shape with a Radius of about 8.7 pixels.
In another layer, draw another circle and fill with a black colour.
Blur this circle a lot more than the previous one. This time with the Blur Radius set at 33.5 pixels.
This is the order of the layers so far in the Palette.
Create a new layer at the top of the Layers Palette and name it “gloss.” Select a white Soft brush and paint the on both sides of the can – hold down the Shift key to constrain your brush stroke to a straight line.
Set the “gloss” layer’s Blend mode to Soft Light and reduce its opacity to 76%.
Here another image with the “gloss” layer’s Blend mode changed to Overlay. I sort of like this blend for it give the Pepsi can a lot more radiance that corresponds with the intense light from the background. Well, we’ll stick with the above image – if you prefer.
Finally, darken the both ends of the base of the Pepsi can with the Burn Tool for a more solid look. And we’re are through! Hope this kick-starts some fella’s career in the brand marketing field.
The new and revitalized CSS3 properties have not only opened up many, many marvelous development solutions for web designers, it has also allowed talented developers to push the boat out further and showcase there CSS skills by building and styling in ways that were never ever thought possible previously.
In today’s news round-up we take a look at some of these amazing experimental pure CSS3 creations…
Please note, you will need either the latest version of Safari or the Chrome browser to fully experience these CSS3 experiments.
Pure CSS Animated 3D Super Mario Icon
By Paul Andrew (Speckyboyand speckyboy@twitter).
Reading about the UI design process of any web site, web application or even a mobile app can be very informative and inspirational for any designer. But nothing would beat experiencing the initial design process, as the original designer did, and getting the chance to view the fruition of a UI concept. The only way you could experience this is by having a look at the designers initial wireframe sketches, and that is exactly what we have for you today in this news round-up – A Selection of Mobile UI Wireframe Sketches.
iPhone Sketches: Paper, Pencils, Wooden Forms, Ink and Brush
By Paul Andrew (Speckyboyand speckyboy@twitter).
“In this CSS (2 & 3) round-up article we have focused on highlighting as many varied techniques covering as many aspects of web, mobile and application development as possible. And believe me, it wasn’t easy!”
As the web has developed so has the technology and range of platforms we can use to engage with it. As the range of screens increases, higher resolution displays are becoming the norm whilst at the same time both larger and smaller screens are becoming more widespread than ever before.
As designers we have a choice. Do we continue designing for the ’safe’ standard of 960px or do we expand our horizons and begin to think about flexible or even responsive web design. Sites that look different for different users depending upon their screen size are not a new thing, mobile sites have been around for years, but responsive design proposes something else entirely, designs which scale to anything from a iPhone right up to a 52″ high definition television screen.
Fluid layouts have been around for years and many of the first sites that populated the early web where such that they would expand to whatever size the browser could handle. These sites have the benefit of only requiring one design and set of code, however when a site can be displayed at any width there can never be any consistency as to how information is presented and often leads to messy sites.
A popular use of fluid width sites can be seen on many of the Yahoo! sites where there is a fixed width column bounded by a fluid area, populated with smaller boxes of content.
By far the most popular method of accounting for vastly differing sizes in screens, and the user experiences associated with them, is the design of two websites. Often first created is the desktop version, after which a smaller, scaled down version is curated for mobile users. This approach achieves two objectives. Firstly it allows for only two designs to be created, minimizing the time taken to code whilst still optimizing the site for each of the two key categories. Secondly it provides the content creator with two, consistent and therefore predictable, formats in which the content will be displayed.
However this split-personality approach to web design can leave out many devices which either fall between the two, such as the iPad and netbooks, or are far larger than the standard desktop, HD Tv’s for example. This can lead to clients requesting an ‘iPad Version of the site’ or citing the need to ‘appify’ their site for ‘those fancy tablet things’.
Once of the most trumpeted developments in the new CSS3 spec is something called ‘media queries’, which allow us the option to specify certain ranges of sizes at which the page should change layout. The benefit of this approach is that the site only has to be designed once and from that each set can be created.
On the flip-side this requires a new way of thinking about content (and probably a fallback of mobile/desktop for older browsers as well), as a series of modules or sections, rather than as single elements.
When building a responsive site there are many considerations, however by far the hardest is how to make your content flow, here are 5 tips for creating a responsive design.
Heading are, or should be, used to break content into scannable chunks. That means that when looking where to break the content for a responsive design headings tags are a great place to start.
On many sites images are only vaguely related to the content around them. It therefore often doesn’t matter whether the image is on the left of, above or below a paragraph of text, making images a great candidate for shifting in a responsive design.
Whilst similar to images these extra pieces of information are often far more directly related to the content than the images. It is often a good idea to group these with the explaining paragraphs, either before or after as a section on their own.
Unless you write long blog posts it is often worth working your design around a blog post, product page or other central content. About Us or Staff pages, whilst nice are far less critical to the sites purpose but those pages that are the bread and butter of the site should be given priority when designing a responsive site.
Navigation is the lifeline of the majority of your content, the single block that has become uniform across the web is a vital part of many users browsing habits and moving it to the bottom or getting rid of it all together can through many a user and make your site that bit harder to use.
Responsive design is about allowing content to fit with the users preferences, whether the user is browsing through an iPod or HD Tv, the website should present the best possible experience. There are some draw backs however to responsive design. Firstly, consider the guy using his HD Tv, whose viewing area is a huge 52″. Whilst at first this may sound like a brilliant idea, anyone who’s ever tried it knows that in actual fact poorly designed sites simply become unreadable.
Anyone considering designing for a responsive web should remember many of the basic lessons of UX design, line lengths that are readable, line heights that allow for easy moving between lines and letter spacing that helps the eye to flow between letters. These lessons become even more important in responsive web design as the option to abuse them becomes so much simpler to create.
Responsive design has both its benefits and pitfalls and anyone considering designing a responsive site would be well advised to read up on the basics of UX design first, remembering a few simple lessons will go a long way. As CSS3 becomes more widespread and sites begin implementing responsive designs it will be interesting to see how they are used by larger corporations and whether it is a technique that will indeed become widely adopted.
As the web has developed so has the technology and range of platforms we can use to engage with it. As the range of screens increases, higher resolution displays are becoming the norm whilst at the same time both larger and smaller screens are becoming more widespread than ever before.
As designers we have a choice. Do we continue designing for the ’safe’ standard of 960px or do we expand our horizons and begin to think about flexible or even responsive web design. Sites that look different for different users depending upon their screen size are not a new thing, mobile sites have been around for years, but responsive design proposes something else entirely, designs which scale to anything from a iPhone right up to a 52″ high definition television screen.
Fluid layouts have been around for years and many of the first sites that populated the early web where such that they would expand to whatever size the browser could handle. These sites have the benefit of only requiring one design and set of code, however when a site can be displayed at any width there can never be any consistency as to how information is presented and often leads to messy sites.
A popular use of fluid width sites can be seen on many of the Yahoo! sites where there is a fixed width column bounded by a fluid area, populated with smaller boxes of content.
By far the most popular method of accounting for vastly differing sizes in screens, and the user experiences associated with them, is the design of two websites. Often first created is the desktop version, after which a smaller, scaled down version is curated for mobile users. This approach achieves two objectives. Firstly it allows for only two designs to be created, minimizing the time taken to code whilst still optimizing the site for each of the two key categories. Secondly it provides the content creator with two, consistent and therefore predictable, formats in which the content will be displayed.
However this split-personality approach to web design can leave out many devices which either fall between the two, such as the iPad and netbooks, or are far larger than the standard desktop, HD Tv’s for example. This can lead to clients requesting an ‘iPad Version of the site’ or citing the need to ‘appify’ their site for ‘those fancy tablet things’.
Once of the most trumpeted developments in the new CSS3 spec is something called ‘media queries’, which allow us the option to specify certain ranges of sizes at which the page should change layout. The benefit of this approach is that the site only has to be designed once and from that each set can be created.
On the flip-side this requires a new way of thinking about content (and probably a fallback of mobile/desktop for older browsers as well), as a series of modules or sections, rather than as single elements.
When building a responsive site there are many considerations, however by far the hardest is how to make your content flow, here are 5 tips for creating a responsive design.
Heading are, or should be, used to break content into scannable chunks. That means that when looking where to break the content for a responsive design headings tags are a great place to start.
On many sites images are only vaguely related to the content around them. It therefore often doesn’t matter whether the image is on the left of, above or below a paragraph of text, making images a great candidate for shifting in a responsive design.
Whilst similar to images these extra pieces of information are often far more directly related to the content than the images. It is often a good idea to group these with the explaining paragraphs, either before or after as a section on their own.
Unless you write long blog posts it is often worth working your design around a blog post, product page or other central content. About Us or Staff pages, whilst nice are far less critical to the sites purpose but those pages that are the bread and butter of the site should be given priority when designing a responsive site.
Navigation is the lifeline of the majority of your content, the single block that has become uniform across the web is a vital part of many users browsing habits and moving it to the bottom or getting rid of it all together can through many a user and make your site that bit harder to use.
Responsive design is about allowing content to fit with the users preferences, whether the user is browsing through an iPod or HD Tv, the website should present the best possible experience. There are some draw backs however to responsive design. Firstly, consider the guy using his HD Tv, whose viewing area is a huge 52″. Whilst at first this may sound like a brilliant idea, anyone who’s ever tried it knows that in actual fact poorly designed sites simply become unreadable.
Anyone considering designing for a responsive web should remember many of the basic lessons of UX design, line lengths that are readable, line heights that allow for easy moving between lines and letter spacing that helps the eye to flow between letters. These lessons become even more important in responsive web design as the option to abuse them becomes so much simpler to create.
Responsive design has both its benefits and pitfalls and anyone considering designing a responsive site would be well advised to read up on the basics of UX design first, remembering a few simple lessons will go a long way. As CSS3 becomes more widespread and sites begin implementing responsive designs it will be interesting to see how they are used by larger corporations and whether it is a technique that will indeed become widely adopted.
What do you recommend? Should your web image have a resolution of 72dpi or is it irrelevant as the browser works in pixels and 100 pixels are 100 pixels no matter what dpi you select? What do you think?
You can leave your thoughts or recommendations below, or you can leave your answer on the original question on Answers here: What resolution do you recommend for an image on the web?
This question was originally asked by Kevin M..
There have been four varied answers so far, you can view them below:
Thanks to everyone who asked a question, but most importantly thanks to everyone that took the time and effort to offer helpful and useful answers.
What do you recommend? Should your web image have a resolution of 72dpi or is it irrelevant as the browser works in pixels and 100 pixels are 100 pixels no matter what dpi you select? What do you think?
You can leave your thoughts or recommendations below, or you can leave your answer on the original question on Answers here: What resolution do you recommend for an image on the web?
This question was originally asked by Kevin M..
There have been four varied answers so far, you can view them below:
Thanks to everyone who asked a question, but most importantly thanks to everyone that took the time and effort to offer helpful and useful answers.
Insta Gallery is a simple to use automatic gallery script. Normally $6!