Flash Develop And Design

How to Create a Wall Graffiti of Bob Marley

We’re are going to immortalize the iconic Bob Marley on a brick wall – graffiti style. Graffiti has come a long way to the point that its argued by some to be respectable works of art for it was and still is considered as rude and destructive in the public sphere. On count, it is highly expressive and does lend to images/text powerful forms representation.Same goes for this tutorial where we’ll be applying Layer masks and Blend modes to merge a grunge-like image of Bob Marley with a brick wall.

Step 1

Start with a Bob Marley picture of your choice. Open a new transparent
document with the document size set to 1280 x 1024 px and a resolution of 140 inch/pixel.

Step 2

Go to Image>Adjustment>Hue/Saturation and increase the Saturation value to 100.

The reason for increasing the Saturation to the maximum was to vividly bring out the shadings of the face. I also had the picture resized to reveal potions of the transparent background.

Step 3

Head on over to Image>Adjustment>Hue/Saturation yet again or
hit Ctrl+U for the Hue/Saturation dialog box. This time, reduce Saturation to -90.

If I had just opted to desaturated the picture completely to gray scale, the picture would’ve appeared to have a faint bluish tint.

Step 4

We’d now fade the details of the image. Clicking on Image>Adjustment>Brightness/Contrast set the parameters below:

Step 5

We’d now apply a rough tile effect by going to Filter>Texture>Mosaic Tiles from the menu. Set Tile Size to 27, Grout Width to 4 (which determines the size of the cracks) and Lighten Grout to 7.

The result:

Step 6

We’ll now apply the Brick Filter effect over the Mosaic Tiles which
would of course blend all nicely and hence, create a more convincing rough
brick wall composition. Go to Filter>Texture>Texturizer and click
the drop-down menu for the Brick texture and set the parameters below:

The result looks better than having any one of the texture filters left out.

Step 7

Download this brick texture from www.sxu.hu
but if you do find a wall with smaller bricks, the better. I was interested in this wall because of how uneven the bricks were. Drag the brick texture picture to the main document window and place it below the “Marley” layer.

Step 8

It was delibrate to have parts of the brick wall to show through when
the Marley image was resized earlier. Also resize the brick picture by
pressing Ctrl+T to enter the Free Transform mode. Holding down the
Shift key, drag the corners of the picture to scale it down while maintaining
its original aspect ratio. Hit the Enter key when done.

Step 9

Set the “Marley” layer’s Blend mode to Hard Light and reduce its opacity to about 45%.

Step 10

With the Foreground colour set to black by hitting the D key, select
the Brush Tool (B) as a Spatter Brush. Increase its diameter to about 153
px and on the brush’s Options bar reduce its opacity to 90%.

Step 11

Click from the left, the third icon at the base of the Layers Palette to create a Layer mask for the “Marley” layer. Now paint around the edges of Marley’s head and his face, particularly around the chin areas. Don’t completely reveal the bricks (except for the edges of the image) while painting away.

Step 12

Select the Gradient Tool (G) and set the colours of Color Stops as shown below:

Step 13

On the Gradient Tool’s Options bar, set the Gradient to Radial and then
drag the tool from the center to the left side.

Step 14

Set the Graidient layer’s Blend mode to Soft Light and its opacity to 75%. And we’re through! Jah Rastefari mon.

MORE VARIATIONS:

Here, I’m playing around with Blend modes and opacities to come up with a
couple variations. The one below is a favourite of mine; the Marley image is a lot more
defined but yet it blends quite nicely with the wall. The “Marley” layer Blend type here was set to Hard Light and its opacity reduced to about 60%.

Moving on further, a Brick Texture Filter effect was applied to the brick picture to get the result shown below:

Now finally, this is another variation with the Blend mode set to Vivid Light. The details of the face here are more faded and the orange-brownish colour of the bricks shows through.Whatever your choice of the Blend modes Ive highlighted, it all comes down to your personal preference.

By David Ella Ella

Rss AD

Fresh Web Designer Tools and Resources

For today’s design news we have highlighted some fresh tools and resources for all you web and app designers out there. There are a couple of tools to help with any CSS3 and HTML5 development issues you may have, there is a marvelous new technique for styling buttons, and finally, and perhaps the coolest of all,some time saving iPad actions for Photoshop.

BonBon Buttons – Sweet CSS3 buttons

These sexy looking flexible CSS3 buttons have been styled with the most minimalistic markup as possible.
BonBon Buttons – Sweet CSS3 buttons

iPad Actions for Photoshop

These Photoshop Actions will allow any UX/UI designer or App developer to quickly create a gorgeous rendering of their app as it would appear on an Apple iPad. All that is required on your end is your final designs (and a copy of Photoshop, obviously).
iPad Actions for Photoshop

Selectivizr – CSS3 pseudo-class and attribute selectors for IE 6-8

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.
Selectivizr – CSS3 pseudo-class and attribute selectors for IE 6-8

HTML5/CSS3 Cheatsheet

Here are some simple cut-and-paste examples of HTML5/CSS3 features that are currently (mid-2010) usable across a number of web browsers, chief among them Firefox, Safari, Chrome and Opera.
HTML5/CSS3 Cheatsheet

By Paul Andrew (Speckyboyand speckyboy@twitter).

Rss AD

JQuery (In Comparison To Flash)

JQuery is a framework for JavaScript which was released in 2006. The whole framework was developed by John Resig, an American Resident, Currently working with Mozilla Corporation as a JavaScript Tool Developer. Although there are many other JavaScript frameworks jQuery has been proven best in all the frameworks. The other frameworks like MooTools, Spry, midori, qooxdoo also allow you to manipulate the client side HTML content, but jQuery became very popular among all these because of its flexibility, easy coding standards and ability to deliver robust outcomes.

In simple language jQuery makes the tasks done by JavaScripts easy, fast and understanding. One can manipulate css, content, images, HTML attributes and even the server side data by implementation of Ajax with jQuery.

Before jQuery whenever it came to animation or sliding, the only thing that came into everyoneâ��s mind was Flash. But after jQuery one is totally ignoring using flash wherever possible. The main reason behind this is not that jQuery is the best over flash, but the implementation of jQuery over flash is better, easy and quick. Whenever one needs to place any flash content in their website, the client browser must be supportive to show the content of the flash. i.e. A Flash player is always needed. Now as the flash player is needed, what happens is that the control for that content is given to the flash player by the browser and hence the third party comes into existence costing the speed of the website. So if the browser is not fully able to load the content of a web page by its own, and requires some other application to show some part of the page, it will definitely take more time to load the page. And what about the users who do not have flash player in their browser at all? They will first need to download it as an add-on and then will be able to serf the page fully, which definitely lessens the interest of the visitor.

Where as in jQuery every kind of animations is possible as the Flash gives and need not the third party application to load or run a code and content. Because every browser introduced till date in this world supports JavaScript, also supports jQuery, remember – jQuery is the framework for JavaScript. Look, how easy it is! One more benefit of jQuery over Flash is that any naÃ¯ve developer or programmer can easily handle it with little sweat, but Flash is not any Tom-Dick-&-Harryâ��s cup of tea. Hence, the ultimate benefit of jQuery is less men power as the developer himself can create the animation and scripting. To use jQuery is also very simple, one just need to add only a single file called jquery.js (jQuery Library) and little code in the HTML page where the magic is to be done. jQuery provides slider, menu bar, image rotation, image fading, text animation, interaction between client side and server side data, and whatever you can think of.

Thatâ��s the reason you would see the jQuery more and flash less in the recent websites. Flash is totally becoming or I can say became obsolete from the world of Web. Now one would prefer Flash only they have a special requirement of the need of the action scripts. Other than this donâ��t expect the anymore use of the Flash in the websites now a days.

Few advantages of jQuery over flash are:

1) jQuery is compatible with every browsers.

2) jQuery is also compatible with iPhone, iPad, cell phones etc. which Flash is not.

3) jQuery is very less in size and on jQuery can create as many animations and sliding and other effects. But in the case of Flash you will need individual flash files for every animations and sliding.

4) jQuery is a freeware, whereas if someone wants to develop something in Flash they would need to purchase a Flash Development Suite.

5) Flash files are always large in size. Where jQuery file is less than 60kb in size.

6) Flash always need the upmost skill to create even a single simple stuff, but it jQuery any one little familiar with HTML and JavaScript can easily create anything.

These are very few, but the list is very long. There is only two disadvantages of jQuery over Flash are there

1) jQuery does not give high 3D effects and,

2) JavaScript can be disabled from the browser which will disable jQuery too.

Few examples of the jQuery artwork like flash are given below:

1) http://webdesignledger.com/tutorials/13-excellent-jquery-animation-techniques

2) http://vandelaydesign.com/blog/web-development/jquery-animation-tutorials/

3) http://www.queness.com/post/1942/10-stunning-examples-of-jquery-animations

Rss AD

Amazing Pure CSS3 Experiments

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.

iOS Icons Made in Pure CSS

iPhone CSS3

Pure CSS Twitter Fail Whale

Pure CSS Animated 3D Super Mario Icon

By Paul Andrew (Speckyboyand speckyboy@twitter).

Rss AD

Touchscreens and Hover states

With the huge popularity of mobile touch devices and the current major drive to make everything web related compatible with these devices, today’s Design Reviver Answers discussion is certainly relevant with current development trends. The question that was asked was “Will Touchscreen devices make hover states a thing of the past?”

You can leave your thoughts and point-of-view below, or you can leave your answer on the original question on Answers here: Will Touchscreen devices make hover states a thing of the past?

Will Touchscreen devices make hover states a thing of the past?

This question was originally asked by Mpstud.

The best answer comes from Darrell Estabrook :

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.

Rss AD

Creating a Grunge Autumn Themed Calendar for September

In this tutorial, we’ll be creating an Autumn themed Calendar for this month of September. The style here is dark and grungy and the final result is appropriately titled the ‘The Fall.’ This being the season of falling leaves from trees. The techniques used to attain the final image are the application of Blend modes, the use of grunge brushes

Step 1

First off, open a new document Ctrl+N, and set its document size to 1280 x 768 px and the resolution to 140 dpi. The wood texture below was from www.mega-tex.nl. Drag wood texture into your working document window.

Step 2

Press Ctrl+U for the Hue/Saturation Dialog box and then reduce the Saturation to -42. This is to fade the wood’s colour a little. We don’t intend to make the colours of our composition too vibrant.

The result:

Step 3

Go to Filter> Render> Lighting Effects and set the Lightening parameters below:

The Lighting Effects result:

Step 4

Now to paint over the lightened wood texture with a grunge specific brush. Download a set of grunge brushes by ART-D. Select the ‘BB Grunge_9′ brush from the Brushes Palette and increase its size to 1166 px and the brush colour that is, the foreground colour to #1f1710.

Step 5

Create a new layer and paint just once over the wood image.

Step 6

Change the layer’s Blend mode to Soft Light.

Step 7

Create a new Curves Adjustment Layer by clicking on the fourth icon from the left on the Layers Palette or go to Layers> New Adjustment Layer> Curves. Drag the midpoint of the straight line downwards to reduce the brightness of the image slightly.

We have now a dark wood surface that appears to be whittling away. Name this layer ‘grunge.’

This is the arrangement of the layers on the Layers Palette so far.

Step 8

Set the Foreground colour to #322c28 and from the Tools Panel, select the Rectangle Tool (U) and on its Options bar, select the ‘Fill Pixels’ icon.The square to be
drawn would be automatically filled with colour.

Step 9

Double-click on the ‘block’ layer for a Layer Style and select the Drop Shadow style. Set its parameters as shown below:

The Inner Shadow Layer Style adjustments:

Step 10

Create a new layer and with the Brush Tool (B) selected, right-click to choose a new grunge brush – ‘BB Grunge_7 ‘and ‘BB Grunge_9′ to be precised. Set the brush colour to #262321 and reduce its opacity to about 85%. Paint on the block not minding if you exceed its boundaries and then on the layer, right-click to select a ‘Clipping Mask’ to ‘fasten’ the brush painting to the block.

Step 11

Select a Soft Round brush and change its colour to #181412. Paint over the block as shown below:

Step 12

Head on to Filter> Blur> Gaussian Blur and set the Blur Radius to about 45.5 pixels. *Note:when the effect has been applied, there’s no need to erase around the edges of the block where the blur might have spread. Finally, set the layer’s Blend mode to Soft Light.

Step 13

For a new layer, select the Elliptical Marquee Tool (M) and draw a circle that just encompasses the lower right corner of the block. Use a White Soft Round brush with an opacity of 75% to paint within the circle. Press Ctrl+D to clear the selection.

Step 14

Apply a Gaussian Blur of a Radius of about 60%. This in effect, increases the light intensity at a point without affecting other areas of the image.

For this layer ‘light,’ reduce the blur’s opacity to 60%.

Step 15

We’ll now add text for the date by selecting the Type Horizontal Tool (T).With the Tool, drag to create a rectangular shape.

Step 16

On the Type Tool’s Options bar, choose the font type as ‘Agency FB‘; the style as ‘Bold‘; size to 24 pt and colour to black. Alternatively, these adjustments can be made on the Character Panel. Enable this if not visible already, by going to Menu bar and select Window> Character. Type in the numbers for the month of the September; hit Enter to go into the next row for another set of numbers and so on.

Step 17

For a new layer, type in the numbers “30, 31″ for the numbers of the previous date and “1, 2, 3″ for
the numbers of the next date (the text colour doesnt matter for now).

Step 18

To make the date correspond with the direction of light, we’ll add a Gradient to it. Double-click on the first date text layer and select a Gradient Overlay Layer Style. Edit the Gradient by changing the Color Stops to the colours show below:

Step 19

Reduce the Gradient’s Opacity to 85% and set its Angle to -72.

Step 20

Add a Drop Shadow style with the adjustments below:

Step 21

For the second date “30, 31, 1, 2 and 3″, add a Bevel and Emboss Layer style. Set its parameters as shown below:

Step 22

Still on the second date, add a Color Overlay Layer style and set its colour to #957f6fand reduce its Opacity to 85%.

The final result:

Step 23

Also type in the days of the week and on the Character Panel, set the font colour set to #181615.

Step 24

For the month and the year, type in “SEPT . 2010″ and the Character Panel set the font type to “Broken Ghost” (you can download it for free at dafont.com)and the font colour to #363535.

Below we have a font with uneven edges that tallies with grittiness of the whole composition.

The completed date for September:

Step 25

Select a Spatter brush for the brush and set its Opacity to 85% Erase a little the set of numbers last row and the last two numbers on the row before. The aim is to make the numbers appear scratched.

Autumn wouldnt be complete without leaves; these maple leaves were downloaded from www.sxc.hu.

Step 26

Drag any maple leaf you fancy into the main document window and use the Magic Wand Tool (W) to extract the leaf from its background. Just click anywhere outside the leaf and hit the Delete key to clear the selection and you’re done! You may have to use the Eraser Tool to clear any hint of white left on the leaf.

Step 27

Use the Move Tool (V) to position the leaf and with the Free transform Tool (Ctrl+T), you might have to scale the leaf down.

Step 28

For the ‘Maple leaf’ layer, add a Drop Shadow Layer style:

Step 29

Follow up with an Inner Shadow style making the adjustments below:

The result below:

Step 30

Select the Brush Tool as a grunge brush and paint just once over the leaf.

Step 31

Create a Clipping Mask for the layer by right-clicking it and selecting this option. Set the layer’s Blend mode to Soft Light and reduce its opacity to 70%.

Step 32

With the Elliptical Marquee Tool, draw a circle and fill with a white colour and deselect or you could just use a Soft Round brush with the appropriate size and stamp a white brush mark over the leaf.

Step 33

Have the round white circle blurred with a Gaussian Blur and set the layer’s Blend mode to Soft Light. Also erase around the leaf to clear any paint outside it.

And this is our Calendar for September. Like I mentioned earlier, its titled “The Fall.”

By David Ella Ella

Rss AD

How to Create Pepsi Can in Photoshop

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.

Step 1

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:

Step 2

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.

Step 3

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:

Step 4

Add an Inner Shadow Layer Style as well:

The final result for the “can” layer below:

Step 5

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.

Step 6

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:

Step 7

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:

Step 8

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:

Step 9

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:

Step 10

In a new layer above the “base” layer, draw a rectangle with the Rectangle Tool (U) and fill with an ash colour – #e8eaeb.

Step 11

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.

Step 12

Head on to Filter> Blur> Motion Blur and increase its Distance to 70 pixels.

Step 13

Hit Ctrl+T to enter the Free Transform mode. Right-click, select the Warp Tool and bend the just slightly the rectangle.

Step 14

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.”

Step 15

Add a Bevel and Emboss Layer Style with the parameters below:

Step 16

Follow up with an Inner Shadow style:

Step 17

Still on the Inner Shadow Layer Style dialog box, select Contour and adjust the points of its Mapping as shown below:

Step 18

Add a Satin style and reduce its opacity to 18%, Distance to 15% and Size to 25%.

Step 19

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.

Step 20

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.

Step 21

Follow Steps 11 and 12 for a brushed metal effect for the “rim” layer.

Step 22

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).

Step 23

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.

Step 24

We’ll also add an Inner Glow Layer Style to the rim as this gives the rim a softer edges without fading.

Step 25

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.

Step 26

Position the Pepsi Logo within the set Guides. That done, press Ctrl+; to clear the Guides and Ctrl+R to remove the rulers.

Step 27

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:

Step 28

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.

Step 29

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.

Step 30

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.

Step 31

With the Rectangle Tool (for a new layer), draw and fill a small vertical rectangles with white.

Step 32

Use the Rectangular Marquee Tool to clip off a part of the “o” letter and clear the selection (Ctrl+D).

Step 33

Draw another small rectangle across the “o” for an “e”.

Step 34

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.

Step 35

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.

Step 36

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.

Step 37

Still within the Transform mode, have the text Skewed. That is, slanted forward on its axis.

Step 38

Select the Burn Tool, with an Exposure of 10% and darken the lower plane of the text.

Step 39

Type out the weight figures of the can in a new layer.

Step 40

Have the text slanted with the Skew Transform Tool.

Below is the final result:

Step 41

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.

Step 42

Add a Motion Blur with a Distance of about 230 pixels.

Step 43

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.

Step 44

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.

Step 45

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:

Step 46

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).

Step 47

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.

Step 48

Use the Eraser Tool to fade edges of the smudge.

Step 49

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.

Step 50

Erase certain areas of the background layer with the Eraser Tool’s opacity set at 80%.

Step 51

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.

Step 52

We’ll now fade the brushed metal effect at some points with the Eraser Tool.

Step 53

Create a “shadow1″ layer and select the Ellipse Tool to draw a flat circle. Fill it with black.

Step 54

Add a Gaussian Blur to the shape with a Radius of about 8.7 pixels.

Step 55

In another layer, draw another circle and fill with a black colour.

Step 56

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.

Step 57

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.

Step 58

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.

Step 59

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.

By David Ella Ella

Rss AD

A Selection of Mobile UI Wireframe Sketches

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

Harvest iPhone App Sketches

Early Ember Sketches in Color

By Paul Andrew (Speckyboyand speckyboy@twitter).

Rss AD

Our Favorite Freebies from the Past Week

For today’s news we have collected our favorites design and development related freebies from the the past week and thought they were that good, that we simply had to share them with our readers.

â��Buddyconsâ�� â�� Vector Social Media Icons

The icon set is called â��Buddyconsâ�� and includes 126 vector social media icons. Included in the set are PNG versions of all 126 icons in both circular and rounded variations as well as a vector source file for easy resizing. The icons are free to use for personal and commercial usage, however, redistribution is not allowed.
â��Buddyconsâ�� â�� Vector Social Media Icons

Free PSD Templates: vCard Personal Portfolio Minisite

This PSD design comes in 4 pages: Homepage (About), Works (Portfolio), Portfolio Pop-Up, and Contact.
All the pages are in Photoshop (.PSD) format with all layers neatly organized in layer groups for easy identification and editing of the logo, text and graphics.
Free PSD Templates: vCard Personal Portfolio Minisite

Modernist: Free WordPress Theme with Focus on Typography

This theme supports widgets, is SEO optimized and has clean and documented code. It loads very quickly, and has various WordPress 3.0 features. Works in IE 6+ and all versions of Safari/Firefox/Opera. The theme is absolutely free to use in private and commerical projects.
Modernist: Free WordPress Theme with Focus on Typography

Typominima: Free typography based minimal WordPress theme

Typominima is a free typography based, gorgeous, minimal WordPress theme fit for the writer inside you.
Typominima: Free typography based minimal WordPress theme

Coda Shortcuts Cheat Sheet (PDF)

By Paul Andrew (Speckyboyand speckyboy@twitter).

Rss AD

How and Why Would Anyone Validate Their Code

Validating HTML or CSS code is a controversial topic. Many are strict on assuring their code is validated while others do not care at all. There are plethoras of reasons why you should validate your code, or at least as much as possible instead of ignoring the errors. We discuss several benefits to validating your HTML and or CSS.

Decrease Cross-Browser and Cross-Platform Issues

There are many reasons why some browsers interpret your code differently from others. While it could be an intended implementation in the browser, it is mainly a bug in its interpreter that causes variant changes to your web page across many different browsers and platforms.

You can implement many quick fixes and “hacks” to your code to get it to look just right in most of the popular browsers. However, as these browsers continue to be updated, one of your hacks or quick fixes may have been a temporary work around to a bug in the browser, which may be fixed in the future causing your site to look awkward after an update has been implemented.

Moreover, while some workarounds are necessary, you can try to eliminate several by just validating most or all of your code, possibly making your website future proof.

Good Development Practices

Assuring your code is completely valid benefits you as a developer as you will help teach yourself good development practices for the future. Additionally, when learning or developing, it is best to learn and develop something the right way instead of keeping bad habits in your learning and developing process.

Professionalism

Validated code is a big sign of professionalism especially to your current or future employer and or clientele. By having valid code, it shows whomever it may be that you take your time to develop something of quality rather than something that seems like you whipped up quickly to get the job done.

As an additional to professionalism being valid code, organized and well laid code is also a sign of quality and professionalism. Thus, always assure your code is neatly organized and valid when need-be.

Standards Compliant Code

Browsers today are always improving to be standards compliant, so your website should too. When you validate your code, it means that your code is standard compliant. With that said, it is definitely a great idea to future-proof your website by validating your code, which generally takes minutes to do.

How to Validate

Now that we covered several benefits to validating your code, how do you validate code?

One of the easiest ways to validating your code is to visit w3.org and use the HTML and CSS validators available there. All you need to do to check if your code is valid, is to either upload, paste, or link your code or website and hit the validate button. If errors return, they usually provide explanations to each error returned, making it generally easy for you to follow through and fix.

Other ways to validate your code is to utilize tools available to make validating code a lot easier. These tools are generally available in a plethora of options such as validators built into Integrated Development Environments, browser toolbars, online services, or even desktop tools.

Overall, validating your code is a definite must whether you do it today or tomorrow. In fact, as time progresses and browsers continue to update to become more standards compliant, not validating your code will mean that your website will not properly be laid out as you may have intended throughout these browsers.

Furthermore, prepare your websites for tomorrow and get the code validated as it will save you time in the future, and your website will more likely work across different browsers and platforms than it would be without being validated.

Rss AD