More Free Photoshop Gradients

Here is a updated Gradients Package we are giving them away enjoy this free Gradients resource.
For Further Instructions on loading these packs refer below.Gradients may very well be the most abundant and apparent feature used in web 2.0 websites, graphics, and logos. Here is my pack of Web 2.0 Gradients. I’ve had these to myself for sometime but it never occured to me to release them for public use until i saw this resource. Which is also a very good pack of web 2.0 gradients as well. I thought i’d go ahead and share mine. So enjoy, and hopefully they will come in handy and maybe save some of you some time!

Euphorish_WEB20_gradients.grd

This is a free gradients package Take it and use it all you like click on the image to Download

Continue Reading

Rounded Corners

Rounded Corners Are harder to think about then to implement all you have to do is spend one afternoon ( Depending on your skill base) and you can have a couple of pre-made Curved corner boxes that can be used time and Time again.

I will provide such templates for you how ever you will need to create new images on some of these if you require a color change I have included a selection of Image Based, Table & Image Based, and CSS curved corner style Display Boxes All images are provided and you can use these directly or redevelop new ones

Below is a collection Of boxes for use on your websites, the colors and images you can take care of if they do not suit this collection is for your furtherance of Web and Graphic Design and also to help bring you up with what the Big boys are using in terms of web site design.

Just Think… “wouldn’t be boring if every thing was done for us , where would be the Lessons and Learning’s come from” Actually it suxs if you have to make everything how ever I don’t have time to do it all at the moment so enjoy and I hope you will take it all a Bit further

 

Round Corner Box 1

Continue Reading

How to Wrap text around an Image on a website page Using CSS & HTML

I have Found this to be very useful when using images and content text together and have Included a small summary on the CSS FLOAT TAG so you can understand whats going on, below is the free download.

Free website Template Complete Download

So You may think that HTML allows us to use the align attribute to get around this text and image issue and you would be correct to a degree, How ever this attribute is now deprecated, cast to the heap of redundant code but please don’t worry just now there is a way if you use the following Transitional Doctype you can get away with it. Below I have included all code HTML CSS

Continue Reading

Definition of: XML

XML: Extensible Markup Language It is used for defining data elements on a Web page and Application to Application Data. XML is similar in tag structure to HTML; HTML defines how tag elements are rendered, XML defines what Data those elements contain. While HTML uses predefined tags, XML allows tags to be authored and set up by the developer of the web application or web page. All data items can be identified simply by preset constructs set out by the developer, enabling Web site pages to-act like databases. Setting up a universalized language method for identifying data, XML supports company to companyData transfers and hassince gone on to be the industry standard format for electronic data transfer as well as Web services XML is a very portable language which can used from application to application and keeps data structure intact thru out the process.

XML the Format

XML has been heralded to the e-commerce world,as thing developed rapidly this was in fact only the first initial stage. The text-readable XML tags provide a simple data format, for the intelligent defining of these tags to serve business needs properly and everyone’s compliance or standardization to using the same tags determines the value of XML. Countless languages have been developed for vertical applications; so many in fact, that a industry standard language was developed to employ a standard for interoperability between them .

XML Documents Can Define

XML web pages are self defined,when XML schema is included , such as XML W3C Schema, are written in XML language and can self identify tags and their relationships to one another on the website page.

XML Compared to HTML

HTML, which uses a rather loose coding style and which is tolerant of coding errors, XML pages have to be well formed, which means they must comply with rigid rules. ETC: XML , XSLT, DTD, DOM, XHTML, HTML, SGML, SMIL and XML-RPC.

XML and HTML CODE

Below are examples of XML and HTML code tags. XML code defines data and content info, where HTML code deals with page layout and structure. XML defines “the information in the tag containers,” and HTML defines “the structure and layout.”

simple aye

XML CODE

<Name>Bill</Name>
<surName>Bailey</surName>
<nickname>Bill007</nickname>
<Birth>10-09-65</Birth>
<address>Example st, New Plymouth</address>
<interests>Golf, surfing, Internet, etc</interests>

HTML CODE

<font size=”2″>Bill</font>
<font size=”2″>Bailey</font >
<font size=”2″>Bill007</font>
<font size=”2″>10-09-65</font>
<font size=”2″>Example st, New Plymouth</font>
<font size=”2″>Golf, surfing, Internet, etc</font>

HTML CODE: Short for HyperText Markup Language, the programming Code or Languge used to create web documents on the [ W W W ] World Wide Web. HTML is similar to SGML, although it is not a strict subset. HTML defines the structure and layout of a Web document by using a variety of ATTRIBUTES and TAGS.

HTML (Hypertext Markup Language) is the set of markup elements or codes used in a file for display on a Web browser . The markup Language instructs the Web browser on how to display a Web page’s layout for the user. Markup code is referred to as an element . Some elements come in pairs and are essentially containers that will control the layout of the page structure an Information that indicate when some display effect is to start and when it is to finish.

HTML is the formal language Recommendation by the W3C (World Wide Web Consortium) is starting to be adhered to by the major browsers, Mozilla firefox (the leading browser) Microsoft’s Internet Explorer and Netscape’s Navigator, which also provide some additional non-standard codes. The current version of HTML is HTML 4.0. However, both Netscape and Internet Explorer implement some different features and provide non standard tag extensions. Web developers using the more advanced features of HTML 4 will have to design web pages for all browsers . Significant features in HTML 4 are sometimes described as dynamic HTML. What is sometimes referred to as HTML 5 is an extensible form of HTML called Extensible Hypertext Markup Language (XHTML).

The problem With HTML is that presentational elements will be removed in future specifications and so will not be able to be used under the STRICT DOCTYPE such as HTML 4.01 strict or the XHTML 1.0 strict. Don’t be alarmed though your page will still be valid, if you use a transitional DOCTYPE, although it is a good idea to start making the change away from these deprecated presentation elements. Another major drawback is all the tags involved just to get the font type and color right throughout the page and then add in the table tags UUUGGHH messy and boring, and what happens when you want to change the font style you have to go thru some mammoth effort, say good by to any plans you had for the next 2 days. So its XHTML all the way and it is now time to move on.

The correct Code structure for an HTML Coded document starts with:

< HTML >

<!–enter here what Web document is about–>

< HEAD >

< BODY >

<!–all Web content and information here–>

</ BODY >

</ HTML >.

All Web content and information needed for inclusion in your Web page fits in between the

<BODY> and </BODY> tags.

There are hundreds of other tags used to format and layout the information in a Web page. Tags are also used to specify hypertext links. These allow Web developers to direct web users to other Web design pages with only a click of the mouse on either an image or word(s).

What is an HTML File?

• HTML stands for Hyper Text Markup Language
• An HTML file is a text file containing small markup tags
• The markup tags tell the Web browser how to display the page
• An HTML file must have an htm or html file extension
• An HTML file can be created using a simple text editor

HTML Basic Document

<html>
<head>
<title>Document name goes here</title>
</head>

<body>
Visible text goes here
</body></html>

Heading Elements

<h1>Largest Heading</h1><h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>

<h6>Smallest Heading</h6>

Text Elements

<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted</pre>

Logical Styles

<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>

Physical Styles

<b>This text is bold</b>
<i>This text is italic</i>

Links, Anchors, and Image Elements

<a href=”http://www.example.com/”>This is a Link</a>
<a href=”http://www.example.com/”><img src=”URL” alt=”Alternate Text”></a>
<a href=”mailto:webmaster@example.com”>Send e-mail</a>A named anchor:
<a name=”tips”>Useful Tips Section</a>
<a href=”#tips”>Jump to the Useful Tips Section</a>

Unordered list

<ul>
<li>First item</li>
<li>Next item</li>
</ul>

Ordered list

<ol>
<li>First item</li>
<li>Next item</li>
</ol>

Definition list

<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>

Tables

<table border=”1″>
<tr>
<th>someheader</th>
<th>someheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>

Frames

<frameset cols=”25%,75%”>
<frame src=”page1.htm”>
<frame src=”page2.htm”>
</frameset>

Forms

<form action=”http://www.example.com/test.asp” method=”post/get”><input type=”text” name=”lastname” value=”Nixon” size=”30″ maxlength=”50″>
<input type=”password”>
<input type=”checkbox” checked=”checked”>
<input type=”radio” checked=”checked”>
<input type=”submit”>
<input type=”reset”>
<input type=”hidden”>

<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>

<textarea name=”Comment” rows=”60″ cols=”20″></textarea>

</form>

Entities

< is the same as <
> is the same as >
© is the same as ©

Other Elements

<!– This is a comment –>

<blockquote>
Text quoted from some source.
</blockquote>

<address>
Address 1<br>
Address 2<br>
City<br>
</address>

For a more complete list of tags, check out some of the URLs below.

www.w3schools.com/html

en.wikipedia.org/wiki/HTML

Graphic Design :

n.

The practice or profession of designing print or electronic forms of visual information, as for an website advertisement, publication

---

Graphic Design Summary:

Is the Preparation and conveyence of a Graphically visual representation of a concept, idea or message, including all aspects of the final visual Design package required, such as Graphic Design illustrations, set typefaces, colors, paper stock, or arrangement of elements on a design page. The design process of any promotion undertaken must incorporate the marketing objectives and strategy, the production capabilities, and the budget limitations of the advertiser or Business.

Graphic design services can be provided by in-house web design staffs , advertising agencies, printers , artists, art studios, and other various artwork services. In house Graphic Design staff are economical if large quantities of design work are needed and also handy to the web designers, but limits the website owner to the style and skills of that group of designers. Printer staff are usually adept at tailoring graphic designs to a client’s printing and production capabilities. Art studios offer a Huge range of talent but at a relatively high cost and Artists being artist time is generally of no importance. Freelancers Graphic Designers can produce very good quality Graphic work at a more reasonable price but may not be available when needed. Syndicated services provide identical artwork and designs to many users, who must adapt them to suit their purposes.

The main tool for Web graphic design is the human Brain. Observational, quantitative, Critical and analytic thought process are required for designing web page layout and Graphic rendering. If the creator / Artist is merely coping a sketch, script or instructions they are not normally considered the Works author. The hand and the eye are often implemented with the use of external traditional or digital image editing tools. The selection of the appropriate tool to the communication problem at hand is also a key skill in graphic design work, and a defining factor of the rendering style.

 

In the 1980s, the arrival of desktop publishing and the introduction of graphic art software applications such as Adobe products, photoshop, Illustrator introduced a whole new generation of web designers to computer image manipulation and 3D image creation . Computer graphic design enabled designers to instantly see the effects of layout without using any ink, and to simulate the effects of traditional media without requiring a lot of area. Traditional tools such as pencils or markers are often used to develop graphic design ideas, even when computers are used for the final product.

 

Computers are generally considered to be the tool used in the graphic design industry. Computers and software applications like photoshop are generally seen, by graphic professionals, as more efficient production tools than traditional methods. However, some Graphic designers continue to use traditional tools for production.

 

There is some debate whether computers enhance the creative process of graphic design. 3 Rapid production from the computer allows many designers to explore multiple ideas quickly with more detail than what could be achieved by traditional hand-rendering or paste-up on paper, moving the designer through the creative process more quickly. However, being faced with limitless choices does not help isolate the best design solution and can lead to designers endlessly iterating without a clear design outcome.

 

New ideas are spawned by way of experimenting with tools and original means, by way of traditional or digital. Some Art designers employ ideas using pencil and paper to avoid creating within the bounds of whatever fonts, clipart, stock photos, or rendering filters are available on any particular software configuration. Others use many different mark making tools and resources from computers as a means of inducing creativity. One of the top features of graphic design is that it involves selecting the correct image creating tools out of it’s ability to generate meaning rather than preference. Some graphic design ideas are created entirely in the mind, before approaching any external media.

 

A graphic designer may also utilize pencil sketches to explore ideas quickly without the limitations of technical nuances from software malfunctions or software learning needed . Handmade rendered art works are often used to get approval of a graphic design concept before going on to invest in what would be too much time to produce finished visuals . The same sketches or drafts on paper may be used to quickly refine and produce the concept on the computer process. This process is especially useful in logo design where a software learning curve would detract from the creative thought processes. The traditional art design - computer-production process may be used for freeing ones creativity in page layout or image development as well citation needed . Traditional graphic designers may employ computer production artists to produce their concept from pencil sketches, without needing to learn the computer skills themselves.

 

Graphic Design Article

Graphic Design Tutorial

Photoshop Tutorials

Icon design

Web design Definition: Web site design is the art of incorporating Various individual elements of Web design langauges and scripts (to create texture, lines, color,shape , ) into a organised web standards arrangement that is accessable to all web users

Web site Design Creation is the process of creating a Web Content page or entire Web of content pages to form an entire website and may involve both the aesthetics and the mechanics of a Web site’s operation although primarily it focuses on the look and feel of the Web site and the design elements.

Some of the aspects that may be included in Web design or Web production are Graphics and animation, font selection, navigation selection, design color, content creation, HTML-CSS-XHTML-XML authoring, JavaScript programming, PHP/MySQL, ASP, Ruby on Rails, Ajax and ecommerce development. Webdesign is a form of publishing electronically to the world wide net.

• Web Designs, Personal Designs, Business Designs,
• Graphic Design, Logo Design, Icon Design
• Web site Content and Development, Optimisation of content
• CMS platforms, Weblogs,
• HTML-CSS-XHTML-XML Languages and style sheets
• PHP, MySQL, PHPMyadmin, Ruby On rails, Ajax

“Well I’m back.., Its Been a hell of a rough ride down here in New Zealand lately, Storms, Floods, Tornadoes, boy that Winter season does come around Fast! some say global warming, I say WINTER!! , But all that Weather drove me indoors to a labor of love this Web and Graphic design blog, so I sat here and wondered whats a good article to write which led me to a wee problem, I need a poll so until I sort that out Ill choose for you as long as there are free give aways at the end, looks like its CSS again!

lets start with one of the most important parts of your site, the contact form or Registration form. Generally people don’t put a lot of web design effort in this area, Ive always had trouble with forms and trying to make them work and look a little different or even tie them into my web site theme design, things are getting easier now with all these cool people who give away their knowledge and code to help us all break away from those all to easy tables. Continue Reading

How I Started CSS I remember the day the CSS seed was planted in my head by My Good friend Al Hall from Earthfirst, of whom I regard Highly in the web world said… “Bill, CSS is the way to design websites!” and I thought at the time what the hell does CSS mean, 5 years later who doesn’t know about CSS, the benefits have started to stack up in its favor in some key ways . CSS has become a real interest to me, and I have now moved on to a point where I have several templates that can be used all the time.

I will Continue to add a resource of free Code at the end of this article.So the Journey began, and I soon realized that XHTML was what I need to learn to keep the code as clean as possible and web standards applicable, only then I was able to to get my Teeth into the true CSS learning process and start future proofing my sites

Continue Reading

Need some inspiration? Check out some of these online portfolios. The list will grow as I stumble across more unique portfolios of todays web professionals. Know of one that is missing already? Leave a comment and let us know!

Continue Reading

Time management is more then just a term used by those in high offices with high paying (stressful) jobs, it is an essential tool for anyone in charge of their own income. This is especially true for Web Designers as well as for Web Developers and Graphic Design Artists. We are going to focus mainly on those in the Web Design field but this can be applied to any other related profession whether you do this freelance or work for a corporation content management is all the same.

As web designers, we are usually met with strict deadlines while juggling two, three, four (or more!) other projects. It can be tough to keep yourself balanced enough to accomplish everything within the time allocated. This is where time management steps in.
Continue Reading

Whew! We just finally finished switching hosts and our now proudly hosted again on Dreamhost.

I’ll take this time to inform our readers who’ve probably noticed a slow down in how frequent we post new articles lately. We’ll most of it has to do with the abundance of work we’ve taken on and any fellow web designer knows how it is when you have 20 projects staring you in the face. Needless to say its hard to find the time to update your own website. But fear not! We are currently brewing over a few ideas on just where to take euphorish. We will always be posting articles and tutorials for web designers, web developers, and graphic artists but we are working on widely expanding our content as well as our post rate! We are bringing on new authors and re-working the beast so please bare with us and we surely won’t disappoint you

“Hey its me Bill…, Some one is here please dont leave, I have upped the anti on the posting front I guess you will either hang around or Bail I will try to keep you comming back with some good free code, tutorials, and Articles

Regards Bill

Every start-up company and website must distinguish itself from the crowd aesthetically. The most important way of doing this is to accomplish the great feat of creating a unique logo for yourself. This is no small job and it’s importance is immense.

A logo is the key to setting you apart while keeping you from being lost in the torrents of new start-up companies. Your logo must be recognizable and distinguishable while memorable enough to a person that he or she will automatically associate that logo with your company or website. It should, more importantly, be associated with quality. You’re not just creating content, you are creating a brand. It makes no difference if your product is sports shoes or technology reviews, you are still a brand.

Let’s discuss the current trend of new internet companies and web apps today. It’s labeled as “Web 2.0″ which means many things (the “re-birth” of dotcoms, Ajax enables web apps etc. etc.), but one thing that all web 2.0 companies have in common is design. While they all are somewhat similar, each are unique in many ways. You can recognize their logo as being “web 2.0″ but you also recognize its unique real estate within the crowd of this emerging trend. We are going to take a note of these designs as we discuss techniques of creating unique logos, logotypes, and typefaces.

The Logo’s of Web 2.0

While you can’t exactly define the style of Web 2.0 there are certainly some similarities…

(Click to enlarge)

I don’t remember where i heard it said, but it was said best that the mainstream design of Web 2.0 is best accomplished by re-visiting your childhood… opening up a box of crayons and doing what comes natural. Its easily seen that the design usually consists of bright matching colors with stark contrast and a bit of detail. We have ditched the small text for big bold fonts and added more gradients and gloss than most likely needed.

The New Age of Typefaces

Typefaces are the most important feature of a logo and website. They should collaborate with the visual presentation of your content. Note that we are using the term “typeface” in place of “font”… The distinction between font and typeface is a font’s status as a discrete commodity with legal restrictions, while typeface designates a visual appearance or style not immediately reducible to any one foundry’s production or proprietary control. [Wikipedia, “Logotypes”]. As for fonts, there are many readily available to download and use for your logo if you are not willing to go down the path of creating your own. Below are some examples for download-able web 2.0 style fonts:

Delicious

Fontin Sans

FF Clan�

NewMedia

Union

JustOldFashion

The typefaces of today are bigger, bolder, and are usually high contrast. With some added brightness in color, some detail you can create a very unique and outstanding logo. Try some gradient overlays and add some gloss.

Detail Detail Detail

What do all great logos have in common? Detail. You don’t have to go overboard… in fact this is more of a practice in minimalism. One single detail in position to your typeface can really make your logo stand out. Contrast is key. Take this logo for instance:

Simple elegant typeface, detailed logo. Not too complex but care was given to each aspect.
Like i said Contrast is important. Make the difference of foreground from the background really stand out. Also, define lines. By this i mean highlight any curves you may use, bring shapes forward. I think you get the idea. Also as a side note to the logo above: it is a great logo for web use only but would you be able to scale it down? Turned into a vector graphic (and minus the gradient background) it could be a powerful logo for any use (see next paragraph).

Vector?… Raster?… Resolution???

A common question in logo creation is whether to create you logo as a vector graphic, or a raster graphic. There are multiple answers to this question. It depends on where and how you are going to use the graphic. Creating a Vector based graphic in a program like Adobe Illustrator or InkScape will usually be the better choice as it can be resized and printed always with its quality intact and without having to worry about resolution. They are also a little more daunting to create for many people, and if you are only going to use this logo on the web then using a raster based program like Adobe Photoshop is perfectly fine.

When is vector not a good choice? When your graphic contains photograph like imagery. Vector images cannot display the detail as pixel-based or raster graphics can. For logos, this is usually not a problem since most logos do not have a photograph of a house in the background and so otherwise Vector is the right way to go. The best practice for any logo is to make a Vector “master” graphic (in case you need it resized for business cards, letterheads etc.) and just save them in web style (.png/.gif) for use on your website.

Still going with raster? What about resolution? Well if you are going to create a master logo in a raster/pixel based program like Photoshop and you still plan on printing and using this logo outside of the web then it’s resolution becomes a factor. When creating an image in Photoshop (and most raster based paint programs) the default setting is 72 ppi (pixels per inch), which is perfectly fine for display on a monitor… but not on paper. When opening a new document, make sure you set the resolution to somewhere between 225 - 300 ppi. All printers are different and referring to the manual is always a good way to find exactly what ppi setting to use. Also note that the higher the ppi/dpi, the larger the file and the more memory it takes just handling the file.

The Process of Logo Creation

Don’t get frustrated if you cannot create or even think of the perfect logo right away. This usually takes some time. The best process is to first use a pencil and paper (remember those???) and draw out some sketches or ideas. Start small, start with the font/typeface then work your way to adding an icon and then throw in some detail. Sign up for an account at LogoPond and upload your work-in-progress… you will get some help and constructive criticism. Most importantly, if you get “Designers Block”… get off your computer, go outside, take a drive… do anything away from your monitor and you will see how quickly it will come to you.

Good Luck, and i hope this article helped you get a better understanding of the daunting task of logo creation! Check some of the resources below for some ideas and inspiration…

More resources:
LogoPond - Identity Inspiration
Thinking With Type
Brand of the World
InkScape
Mi� i Pile: Logo Design Portfolio

Works cited:

“Typeface.” Wikipedia, The Free Encyclopedia. 16 Mar 2007, 09:40 UTC. Wikimedia Foundation, Inc. 21 Mar 2007 <http://en.wikipedia.org/w/index.php?title=Typeface&oldid=115521101>.

Yes, i know this is a cheesy title, give me a break! Anyway, in this tutorial we are going to learn and examine the different ways of adding the “gloss” effect to your graphics and logos. This effect can be done, more or less, to just about anything. For our examples, we are going to use web buttons. We are going to try to cover a few ways you can do this effect so you can be the judge on the best (or quickest) way to do this depending on your needs and application.

Part 1: The “Easy” way

This technique is pretty straight forward and will give us a sort-of convincing “glossy” look to our buttons. Lets begin by opening up photoshop. Create a new image, any size you’d like… i tend to give myself a lot of room to work with then end up cropping my final outcome at the end. Then…

• Click the “Rounded Rectangle” icon (or press the “U” key)
• Create a rectangle about the size of the button you want (i used 223 x 63)
• Highlight the button/shape by Ctrl + Clicking the layer
• Right click the layer and go to “Blending Options” (or: Layer > Layer Style > Blending options)
• Select “Gradient Overlay”

And inside the gradient overlay options, click on the gradient to create a gradient similar to the one shown below (click here to learn how to make a gradient):

Then use these options on the gradient overlay:

Ok, now you should have something like this:

For the lazy ones, you add some text or a little shape and be done with it… but wouldn’t you want to make it look good??? Well then…

Part 2: A little more convincing…

Now with what we have from above, we are going to edit and add a little to make this look a little better. Do this by going back to the gradient overlay options (layer > layer style > gradient overlay) with the buttons layer highlighted (ctrl + click the layer). We are going to change the gradient to a more conventional pattern (very easy!) by clicking back on the gradient in the ‘gradient overlay’ options menu (just like before) and we are going to spread out “stops” on opposite ends like so…

Now we should have a button like this:

To add gloss, we are going to create a new empty layer (Ctrl + Shift + N or Later > New > Layer) and name it something like “Gloss” and make sure it is above the button layer.

Now on the “gloss” layer, use your selection tool (M) to select somewhere in the middle of the button like so (note: I’m not exactly in the middle):

Now with your Paint Bucket tool (G), fill it with white (#FFFFFF). After that, decrees the layers opacity to about 15 - 19% and you should have something like this:

Looks a bit better then the last one right? Well it also adds more flexibility for color. Try other gradients over your button layer to see my point. Switching colors takes no time.

Does that outcome satisfy your hunger for gloss? We could end it there and be happy with it… right? Screw that, lets make it even better

Part 3: Now thats what I’m talking about…

Ok, we’ve done it a couple different ways and it looks alright, but we really want this to look “glossy” not just duo-toned… i mean people can’t be fooled that easy. Well for this last step we don’t have to do much… it’s really easy.

• CTRL + Right Click your “Gloss Layer.”
• With it selected, hit your “Delete” key to remove the white
• Select your Gradient tool

Now… Double click on the gradient on the upper left side of your program:

Now select the gradient labeled “Foreground to Transparent.” It should be the second gradient if your using photoshops default gradients… if its not there you can load or reset your gradients to the default (save your others in their own set just incase)… this is done by clicking the little arrow on the top right of the gradient window (next to the OK button). It should look like this:

Now highlight it and click ok. Now make sure your forecolor is white (D then X). And with that layer selected (should be covering the top half of the button) you are going to click and drag with your gradient tool from the top of the selection to the bottom (which should be the middle of button).

Don’t see much of a change do you? Well thats because you’re supposed to change the Gloss layer’s opacity level back to 100%… Looks better now huh? To get rid of the gradient parts surrounding your button you can either just crop it… or hold down CTRL and click the gloss layer… it should, more or less, select the overflowing top gradient… then delete that part and you should have something like this:

I think that looks like a glossy button huh?

Now that you have mastered the art of the gloss… you can spruce up your button (or whatever you used during this tutorial). For the button, Add some text and an icon… try adding a stroke to it (Blending Options -> Stroke). Try different shapes, like un-rounded. I like to cut out a bit of the button on the left to look like this:

Now add some different gradients to the button layer and change it up a bit…. this is just the basic tutorial and you could add even more if you fool around with it. Also, If you round the button a little more, remember you can also create a rounded like shine for the gloss by using the circle selection tool.

No, we’re not talking about the early 90’s music movement. We’re talking about the “Grunge” effect that we are all so in love with these days. In this tutorial we’re going to discuss how and where to not only use the grunge effect but also learn how to make our own grunge brushes for re-use in all of our projects.

Continue Reading

In this article (slash) tutorial we will explore Gradients in all their glory. Simply put, a gradient consists of two or more colors gradually blended together. They are often used to add depth to dull single-color filled backgrounds as well as doing a lot of other cool things. This technique is a fundamental part of graphic design and you probably already use them often enough but in this article we challenge you to return to the basics and maybe learn some new things that gradients can do for you. Also, if you’re new to this then this should be a good place to get a good grasp of how gradients should be approached.

Note: for this tutorial we will be using the “Gradient Tool” located on photoshop’s Tools menu, or by pressing the “G” key as a shortcut. There are however, many other ways to access and create Gradients, such as through Layer > New Fill Layer. Layer > Layer Style, and Layer > New Adjustment Layer… but using the Gradient Tool (G) allows for more control over your gradient placement(s) and plus its right there and easier to use!

Making Gradual Two Toned Gradients

A two colored gradient is the simplest gradient to create but is also, in my opinion, the best looking as it doesn’t add too much noise to a picture or background. They allow for easy contrast between the background and the foreground of an image, allowing you to “show off” the main part of your creation, whether it be a graphic or web page.

Remember in this article we are learning how to make better gradients. So we are going to set up some “rules” here and maybe explain a little more about how to pick the colors for gradients. I’ve seen some horrible looking gradient patterns… just look at some of the default photoshop presets and you should see my point. Any color can be made into a slick looking gradient but you have to pick a color close enough to the original to make the transition between the two colors work. Picking a bright red color to transform into a bright blue will always look bad but picking a dark colored blue to transform into a slightly lighter colored blue (see above) will always work and look nice. This is even easy to do so lets begin…

(you can skip this if you already know how to create gradients)Start by selecting the gradient tool (click image below), or by pressing your “G” key.

Now with the gradient tool selected lets open up our gradient editor by clicking in the middle of the gradient shown in your upper left screen (click image below):

Now with the gradient editor open you can begin to create (and edit) your own gradients. You also should see some of photoshop’s default preset gradients in the box above. You can see more of them by clicking the arrow on the top left of that box or by manually loading the .GRD file.

Now lets make a gradient. We will start by choosing your first color. Do this by double clicking on the first left “stop” in the gradient editor (below):

This should open up a Color Picker dialog window for you to choose your first color. Pick what you like, or use what I used, color 0284d1 (copy and paste that into the color picker textbox labeled “#”). Either way, pick one and press OK. Next, click the right stopper (opposite side) and pick your next color… whether your going lighter to darker, or darker to lighter always make sure it is similar enough to blend without clashing. This should be pretty obvious as you test out different variations. You can choose the second color i chose 046ba9 to see the slight contrast between the two… although this doesn’t have to be such a small difference, you could make the color gap even larger depending on what you have in mind for its use.

Making A Better Gradient

Well thats the basics on creating a two color gradient but like i said before, we are here to discuss making better gradients. There are so many ways to make gradients its too much to cover everything here so we’re going to stick to a certain path by going over different techniques and try and cover the grounds that way. So lets begin already.

Lets talk about color tones and ways to choose them. Lets start with an experiment. Open up the gradient editor and double click your first stop. Now select a random color, any color and copy its hexadecimal code. Now close it and click the next stop (note: make sure they are far left to far right for this), now paste its hexadecimal code to have to same exact color selected. Now click one of the textboxes labeled “H S B” “R G B” “L A B” and “C M Y K”… for example, select ‘B’ in the HSB. Now hold down shift, and press your up key about 2 - 4 times (try this with other directions and selections). Chances are you have a perfectly good looking gradient. Easy, yes, fun? not really but you get the point. Stay close to the original color while making the different tones obvious. Now that we got that out of the way lets have a little more fun with gradients.

Techniques

There is all the hype going around about “Web 2.0.” It’s definition, which used to be pretty obvious is now getting a little more blurred as it grows on but we are going to use the term to describe what a lot of people call “Web 2.0 Colors.” They make for nice looking webpages and graphics that really stand out. Fortunately for us, this is a very basic concept and easy to re-create.

Lets start by using gradients in a slightly different manner. We’ll do it by creating a simple logo for a webpage. Follow these basic steps to begin…

• Start a new image (file > image > new).
• Select the size to be something around 380 x 170. (to give you room)
• Select the Text Tool (T).
• Press the “D” key to default the colors.

Now lets write a name for our logo. Call it whatever you please, i used the name of this site. Now choose a font. Almost any will do but i suggest something somewhat simple. Once this is done, rasterize your type layer by going to Layer > Rasterize.

Now we are going to make a gradient for our colors to use on our logo. Start by opening up the gradient editor. Click the first stop and choose your color, use something bright . I’m using a blue (# 0071b5) for the first color and using a darker blue (# 0284d1) for the second color.

Now place both stops in the center of the gradient (both at about 50%), see image below:

Now hold down Ctrl and click your text layer to highlight your text. With your text selected use the gradient tool (G) and drag the line slightly above the half way point of your text to create the gradient. Also you can do this by going to Layer > Layer style > Gradient Overlay. Either way It should look something similar to this….

Not very pretty yet but bare with me. Next go to Layer > Layer Style > Stroke and change the settings as followed…


Click OK to save. Now Duplicate the the layer. Hold down Ctrl and Select the new layer. Now select the gradient tool and go into the gradient editor. This time do the same type of gradient as the last but another color. I used red this time. Then do this all over again (duplicate layer etc. etc.) and make a new gradient. I used green for the third one. After this you should have a red, blue, and green text on 3 different layers. Now all you have to do is position them. You should have something kind of like this…


Note that I changed the background to black to better suit the colors. You can also add startbursts to the side or under it. Makes for a simple yet stylish Web 2.0 logo and is just one of the many things you can do with gradients.

Sorry To leave you hanging here kids, but we will have to save more discussion and tutorials for next time! So just wait for Part 2 very soon.

Description: Introducing “Vector Storm” a small brush pack for Photoshop 7+. Includes clouds, lightning, rain drops and lines, rainbow etc. etc.

Terms of Use: None required but a comment or link back would very well appreciated.

Installation: Download File to your ‘…photoshop/presets/brushes’ folder and load from the brush menu in PS.

Enjoy!

This post is your one stop shop for (quality) free icons on the web to use in your own projects from Web Design to Applications. Many are mini (16×16) icons. Note that most are in .png or .gif format… if needed, you can convert them to .ico either by using this plug-in for photoshop, or do it the lazy way online here. Enjoy!

And now for the list…

Mini:

• FamFamFam Icons
• mIcons (german)
• 2pt3 twotone
• nDesign Icons
• ASP Icons
• Sweetie Set
• Tiny Icon Factory

Large:

• The Yellow Icon
• Fast Icon
• PixelGirl
• Iconahloic

Site Related:

• Feed Icons (rss icons)
• Social Bookmaring Icons
• Ajax Loading Icons

Vector Brush Set for Photoshop 7+. First of a set with more to come. Note that this is a direct link to the Deviant Art submission. Download by clicking the link contained on the left menu on the following page…

(Note: Click download link on left menu)

Next Posts »