How to Wrap a Flag Around a World Cup Trophy

Jun 30
2010

In the eve of the World Cup taking place in South Africa, I thought I’ll serve up a tutorial celebrating the football fiesta.

In this tutorial, we’ll be be wrapping a flag around the World cup trophy by using the clipping Mask command and changing the Blend modes of the layers we’ll be creating. In the final image, we’ll sort of make light work of the official World Cup logo.

Step 1

We’ll start with an ‘ordinary’ World Cup trophy that can be found easily on the internet. Use any Selection Tool of your choice (E.g. Magnetic Lasso or Magic Wand Tools) to remove the trophy from its background.

Step 2

A closer look at the trophy, you find a thin white line left from the background. With the Eraser Tool (E), at a reduced opacity of 40%, cautiously fade the edges of the trophy.

The result is a trophy with soft edges.

Step 3

Press Ctrl+N for a new document with a white background and set the document size to 1280 by 950 pixels and a resolution of 140 dpi. Drag your trophy into this new document and name the new layer ‘cup 1′. This step could be skipped if you’ve decided to stick to the current document you started off with.

Step 4

Hit Shift+Ctrl+U to desaturate the trophy.

Step 5

To brighten the trophy just a bit, hit Ctrl+L for the Levels Dialog box and then enter the parameters for the Input Levels as shown below. Duplicate the ‘cup 1′ twice name the layers ‘cup 2′ and ‘cup copy’ respectively. (*Note: the ‘cup copy’ layer should be placed below the other cup layers).

Step 6

You can download this South Africa flag for free from www.sxc.hu. I chose this flag because the lines of the flag weren’t too straight and the flag’s texture looked glossy. These conditions I find ‘near perfect’. Right-click to duplicate the flag and named it ‘flag2′. We’ll be using the it later.

Step 7

For the sake of illustration, I reduced the opacity of the flag to show the position of the ‘cup’ behind it. Anyway, Press Ctrl+T for the Free Transform Tool and rotate the flag as shown below. Also right-click to
select the Distort Tool to narrow the selection a little more to accommodate white strips of the flag.

Step 8

Still in Free Transform Mode, right-click the selection and select the Warp Tool and make the subtle distortions as shown below:

Step 9

With the ‘flag’ layer selected, right-click and choose Layer Clipping Mask for the result below:

Step 10

Set the Blend mode of the flag to Multiply and merge the two layers by pressing Ctrl+E.

Step 11

For the ‘flag 2′ layer, add a Layer Clipping Mask to the ‘cup 2′ layer and set its Blend mode to Overlay.

Step 12

Pressing Ctrl+E, merge the ‘flag 2′ and ‘cup2′ layers and set its Blend mode to Lighten. I did this to bring out reflections (white areas) of the trophy.

Step 13

To adjust the tone of the trophy, press Ctrl+M for the Curves Dialog box.

The final result shows the colours of the flag been realistically smeared all over the trophy.

Step 14

To make the image’s detail stand out a little, go to Filter>Sharpen>Sharpen and hit Ctrl+F to Sharpen again. Since the Sharpen effect happens on a ‘level by level’ basis, this does not allow for a steady progression for applying the effect. So in this case, we’ll have to fade the Sharpen effect by going to Edit>Fade to reduce the Sharpening other the image would look grainy somewhat.


The result:

Step 15

You’ll notice that the two rings at the base of the trophy has spots of colour on it. Use the Eraser Tool that’s set to a Soft Round Brush and Hardness increased to 50%. Erase the faint colours on two rings at the base of the trophy of both ‘cup 1′ and ‘cup 2′ respectively to reveal the ‘cup copy’ base (that is, the third cup).

Step 16

To give the trophy more solidity, double-click the ‘cup 2′ layer to bring up the Layer Style. Choose Bevel and Emboss and set the parameters below:

Step 17

Also select an Inner Glow Layer style and make the adjustments below:

The result:

Step 18

Create a new layer (the top layer in the Layers Palette) and with a white Soft Round brush highlight the edges of the cup and change the Blend mode to Softlight.

The result:

Step 19

To complete the image, I added two Layers with one having a Radial Gradient Fill and the other a Linear Gradient.

Step 20

An ellipse shape filled will black was blurred with a Gaussian Blur (Blur Radius: 2.5%).

The base of the cup was copied using the Marquee Tool (M) to a new layer. Then it was rotated using the Free Transform Tool, Flipped Horizontally, blurred just slightly and faded by reducing its opacity to about 50%.

Step 21

I threw into the mix the official World Cup logo and duplicated it twice.

Step 22

I desaturated the top logo and erased some details using a Layer Mask and the second logo was placed behind the Radial Gradient fill for the final image. The idea was having most of the colours of the World Cup logo appear to have been sapped by the trophy itself.

Even though I’m not a South African, all I can is go Bafana! Bafana! And blow your way through the tournament like a Vuvuzela! Some people might not take kindly to this, you know.

By David Ella Ella

Four Web Design Articles Well Worth Reading

Jun 29
2010

As web designers we all love searching for great new resources, browsing some useful and relevant tutorials and we especially love them as most are free. Sometimes though, we need something more, something that will set your mind alight and for you to consider it a darn good read. And that is what we have found for you today, four web design articles that are well worth your time. So, grab yourself a cup of coffee and take the time to enjoy them.

The Web Strategy Pyramid: A Well-balanced Web Strategy

The Web Strategy Pyramid: A Well-balanced Web Strategy

Remember when mom always told you to eat your vegetables? Little did you know she was giving you fantastic advice for managing your Web strategy. In these days of Twitter, Facebook, forums, blogs and more, it can be tempting to skip over the basics and dive headfirst into an oh-so-tempting dish of social media or SEO "tricks."
The Web Strategy Pyramid: A Well-balanced Web Strategy

How To Control Flow Within Your Web Designs

How To Control Flow Within Your Web Designs

Think of your favorite song. In all likelihood the sound rises and falls throughout, the pace quickens and slows, and the rhythm and melody lead you to hear chords and notes that are about to be played. Music has a flow that guides you from one moment to the next. This flow can impart different emotions and have you feeling different things at different parts of the song. In fact, without that flow, there is no music.
How To Control Flow Within Your Web Designs

The Solar Method (of building websites)

The Solar Method (of building websites)

In this post,the author tries to express what he believes to be a healthy candidate for the title of Website Building Standard Method. He calls it the Solar Method (of building websites).
The Solar Method (of building websites)

Web Designers, Don’t Do It Alone

Web Designers, Don’t Do It Alone

Whether freelancers, small agency founders or website owners, too many of us work alone. The downside of the digital revolution is isolation. The Web allows us to do alone what previously would have required a team of people. It also frees us from the constraints of geography, allowing us to work from home. But while these are benefits, they also leave us isolated.
Web Designers, Don’t Do It Alone

By Paul Andrew (Speckyboyand speckyboy@twitter).

Follow & Tweet Widget – Another jQuery Plugin

Jun 29
2010

15 Google Chrome Extensions for the Avid Designer

Jun 28
2010

Google Chrome has become one of the best choices for web browsing, especially for designers and developers due to its flexability. Even though Firefox is still considered to be in the lead, it’ll only be a matter of time before most delve into Chrome. This web browser has great speed and top notch functionality due to the large variety of extensions available.

Below we’ve put together a list of great Google Chrome extensions that will help you save time and evovle the way you use your browser.

Web Developer

The Web Developer extension adds a toolbar button to the browser with various web developer tools. This was created and developed by the same person who made the popular Web Developer extension for Firefox.

FireBug Lite

Firebug Lite is not a substitute for Firebug, or Chrome Developer Tools. It is a tool to be used in conjunction with these tools. Firebug Lite provides the rich visual representation we are used to see in Firebug when it comes to HTML elements, DOM elements, and Box Model shading. It provides also some cool features like inspecting HTML elemements with your mouse, and live editing CSS properties.

Pendule

Pendule is an array of useful extended web developer tools for Chrome. Use this extension in addition to the built-in Developer Tools (Ctrl+Shift+I).

Resolution Test

Resolution Test changes the size of the browser window for developers to preview their websites in different screen resolutions. It includes a list of commonly used resolutions and the ability to customise that list. It also gives users the option to turn on Google Browser Size, more info on that here – http://browsersize.googlelabs.com/

Speed Tracer

peed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs. Speed Tracer is available as a Chrome extension and works on all platforms where extensions are currently supported (Windows and Linux).

Eye Dropper

Eye Dropper and Color Picker extension which allows you to pick color from any webpage or from advanced color picker.

PlainClothes

This extension styles — or rather “unstyles” — the web. Just imagine: text is black, backgrounds are white, unread links are blue, visited links are purple, all links are underlined. Or any other colors you like. And all text is rendered in your default fonts (as defined in “Options” > “Under the Hood” > “Change font and language settings”). Everywhere. Automatically.

You can control the extent of the “unstyling” via the Options window (“Extensions” > “PlainClothes” > “Options”), and you can toggle the “unstyling” on a per-site basis by clicking the icon in the location bar.

jQuery Shell

jQuery Shell allows you to run JavaScript and jQuery 1.4.2 commands in the context of the current web page. It is simple tool to use when experimenting with / learning JavaScript and jQuery commands.

Aviary Screen Capture

Take a screenshot of any webpage and edit it directly in your browser with Aviary.com applications. Plus convenient access to the Aviary website and tools.

This quick screen capture addon is a must-have for bloggers and designers alike! It will perform a screen capture of the visible portion of any webpage and then open the capture INSTANTLY in a basic image editor where you can do markup (draw arrows and rectangles), edit (crop, rotate and resize) and get the exact pixel colors of the image. A perfect companion tool for designers and bloggers!

Image Cropper

This extension help you to crop any images on the fly. It’s especially useful when you need to crop your online album photo for IM thumbnail.

Validity

Validity can be used to quickly validate your HTML documents from the address bar. Just click the icon in the address bar to validate the current document without leaving the page. The number of validation errors can be seen in the tool tip and the detail can be seen in the Javascript console.

WebEdit

WebEdit allows you to make any webpage editable, however, the changes will no be permanent. It’ll help you visualize and structure an already-made website into what you’d like it to display. It’s a pretty useful and handy tool.

Chrome Sniffer

This extension will help web developer to inspect web framework / CMS and javascript library running on current browsing website. An icon will appear on address bar indicates the detected framework. Currently, this extension can detect up to 50 popular CMS and javascript libraries, and more will be added in future releases.

MeaureIt!

Draw out a ruler that will help you get the pixel width and height of any elements on a webpage.

iMacros

iMacros was designed to automate the most repetitious tasks on the web. If there’s an activity you have to do repeatedly, just record it in iMacros. The next time you need to do it, the entire macro will run at the click of a button! With iMacros, you can quickly and easily fill out web forms, remember passwords, create a webmail notifier, and more. Web developers use iMacros for web regression testing, performance testing and web transaction monitoring. It can also be combined with Google Speed Tracer, Firebug and other web development and test tools. XPath support is included.

21 Animated Banner tutorials in Photoshop

Jun 28
2010

World Cup Soccer Inspired Designs

Jun 28
2010

Adobe Illustrator: 3D video tutorial

Jun 28
2010

PSD to HTML Service Review: SEO-Semantic-XHTML.com

Jun 26
2010


seo semantic

Web Designing & Development is a very demanding profession; you need to have complete dedication towards your work in order to be successful. There can be Ups and Downs in your career; still you need to move on. Sometimes you face so much pressure when you are flooded with orders and you struggle to meet the deadlines. But you can neither compromise on quality nor on deadlines, after all client satisfaction should be the top most priority. In order to avoid such critical situation it is advisable to have tie-up with a trustable partner for PSD to XHTML conversion or slicing, which requires a professional touch, to meet the quality standards.

Being in this profession for many years now, I keep track of almost all the PSD to HTML service providers and their work, and recently I came across one such service providers, seo-semantic-xhtml.com, and decided to write a review for them, as I was quite impressed by their quality of work, clientele list and their work process.

SEO-Semantic-XHTML and Services:

SEO-Semantic-XHTML.com is a California, USA based company, provides professional PSD to HTML/ XHTML and CSS conversion services, they take design/images in all possible format i.e., PSD (Photoshop files), ai, jpg, pdf, etc. and convert it into 100% hand coded semantic markup (PSD to HTML/XHTML & CSS webpage) and with the guarantee of home page delivery within 8 hours.

For sites that need dynamic interactivity they use JavaScript and AJAX and for larger, more complex projects requiring database functionality, MySQL with PHP. They also integrate designs into Joomla, drupal, Magento, Net Suite, X-Cart, Movable Type, Zen Cart, osCommerce, WordPress, CubeCart and CMS Made Simple.

I went through the site in detail, and found some interesting features. Here are a few features which attracted my attention.

  • Adhering to the best coding practices, XHTML/ CSS code which look exactly like the design, which is operating system and browser compatible, w3c Validated and SEO friendly.
  • Turnaround time of CSS slicing is 8 hrs.
  • 11 years of experience in writing HTML code.
  • Customer support available 24hrs a day, Monday through Friday.
  • Money Back Guarantee: company’s claim “Our team is sure that our work will meet your requirement and quality expectations. But if you are not satisfied, we will work with you until all of your concerns are addressed. In case, we are still not able to meet your expectations, 100% of your money will be refunded.”

These Facts provided by the company are worth taken into consideration –“97% of our customers recommend our PSD to HTML service to a friend and 94% of our clients come back to us for their next PSD Slicing project”

What I was really impressed with were their PSD to HTML Portfolio Page and the Clientele list. Their portfolio shows the quality of work they do.

Clientele List Includes:

Farmers, Sony Pictures, Columbia Pictures, Best of the Web and The Walt Disney Company, Auton and many more…..

Order Process:

The order process is simple and clear and rates are competitive and no hidden cost involved. Complete details are provided in their order form.

They have two packages:

The standard Package: They Charge $ 79 for the standard package and $ 39 for every inner page
Markup Type: HTML 4.01 Transitional/Strict, XHTML 1.0 Transitional. Including Div based and search engine optimized code.

Professional Package: $ 159 for the home page and $ 79 for every inner page.
Markup Type: HTML 4.01 Transitional/Strict, XHTML 1.0 Transitional, XHTML 1.0 Strict.
Which includes Div based and search engine optimized code, Commented markup,Shorthand and commented CSS.

You can also avail for various extra features like Layout options, Advanced Options, Software Integration.

After seeing their work in their Portfolio Page and the clientele list, I would definitely recommend their service.

Contact Details:

http://www.seo-semantic-xhtml.com/contact-us.php

[email protected]

Related posts:

  1. Markup Service – PSD to XHTML
  2. 20+ Tutorials to Convert PSD to XHTML / CSS
  3. 250 HTML and Web Design Secrets


Do you like what you see? Any help is welcome! It keeps me working and provide YOU with Free Vector Graphics. Thank you!



© Garcya for Web Design Blog, 2010. | Permalink | 3 comments
Post tags: , ,
Digg del.icio.us Stumbleupon Technorati Reddit

Culture Difference in Web Design

Jun 25
2010

At times, a commonly overlooked aspect of web design is catering for potential multi-cultural users and thus missing out on a potential readership or potential customers.

Yep, the internet really is global. This was a topic that was recently discussed on Answers, and we would like to open this discussion further with our readers. What do you think, is there a such thing as culture difference within web design?

You can leave your thoughts on web design cultural differences in the comment section below or you can leave your solution on the original question here: Is there a such thing as culture difference within web design? on Answers.

Is there a such thing as culture difference within web design?

Is there a such thing as culture difference within web design?
This question was originally asked by Shu, and you will find the favorite answers below:

Best Answer from Devone:

Is there a such thing as culture difference within web design?

Unanswered Answers

Can you help with this weeks unanswered questions?

  1. How can I tell if a visitor is leaving my website?
  2. What Are the Cons When It Comes to Implementing HTML5 in Your Web Designs?
  3. Can I Use PHP Short Tags With Minimal Issues?
  4. How Can I Send HTML Through AJAX POST?

Thanks again, firstly to everyone who asked a question, but most importantly thanks to everyone that took the time to offer always helpful and useful answers.

Our Favorite Photoshop Text Effects Tutorials

Jun 24
2010

In today’s news round-up we have collected some of the best and freshest Photoshop text effect tutorials. Text effect tutorials are one of the most popular sought after learning categories for PS, and as such there hundreds upon hundreds of tuts of varied degrees. We have picked our recent favorites, you can see them below.

Elegant 3D Text Effect

Photoshop Text Effects

In this tutorial you’ll learn how to create an elegant 3D Text effect using simple the shape tool, layer styles and paths.
Elegant 3D Text Effect

How to Create Cool Water Effect Typography

Photoshop Text Effects

You will be shown how to create a cool water typography effect in Photoshop playing with stock photos, blend modes and filters. You will also use some water splash brushes and smooth gradients to give a splish-splash feel to your design.
How to Create Cool Water Effect Typography

Colorful Plexi Text Effect

Photoshop Text Effects

In this tutorial, you're going to be shown how to create a cool looking colorful Plexi text effect. Throughout this tutorial you’ll create letters separately, getting some help from the Actions.
Colorful Plexi Text Effect

How to Create an Incredible Typographic Illustration

Photoshop Text Effects

In this two-part tutorial, you’re going to learn how to bring a simple proverb into a complex typographic illustration that achieves a level of realism without actually using any photos.
How to Create an Incredible Typographic Illustration

Awesome Text Effect

Photoshop Text Effects

In this 12 step easy to follow tutorial you will be shown how to create this cool text effect using a basic distortion filter.
Awesome Text Effect

By Paul Andrew (Speckyboyand speckyboy@twitter).