Goscreative.com

Free Wordpress Theme: Aqua Marina

2008-05-01T11:24:00.000-07:00

Theme: Aqua Marina
Author: Jon Gos
Version: 0.5 Rosie
Description: An original Wordpress theme.

This was my first attempt at a bespoke wordpress theme. I created it in Photoshop then marked up to XHTML and then PHP. This is a public beta, please help me work out all the bugs and kinks by posting any errors as a comment here! The photoshop file used to make it is included for anyone who wants to redesign it.

Download Aqua Marina

Latest from Developer Tutorials

2008-04-24T12:51:00.001-07:00

You can see my latest posts from Developer Tutorials here.

20 Time Saving Keyboard Shortcuts

and

Understanding Scripting in Photoshop

Creating Energy Spheres in Photoshop

2008-04-15T15:43:00.000-07:00

In this tutorial I show you how to create an image like the one above with electric energy spheres right out of your imagination. Read it here or click the image above.

Inspiration Round Up

2008-04-09T12:34:00.000-07:00

Here's a list of a few sites that have inspired me this week:

1. Carsonified.com
Designers or Event Planners? Who knows but everything they touch looks great.

2. Causeaffect.aigasf.org
Activism plus design, who can ask for anything more?

3. Photoshoplady.com
Women tutorial too.

4. Carbonmade.com
Well designed, great prices, looks fantastic.

5. PSDtuts.com
Another great looking tutorial site.

Creating a Realistic Sun in Photoshop

2008-04-07T20:53:00.000-07:00

Check out my latest tutorial over at Developertutorials.com.

Working With Wordpress Offline Like a Pro

2008-04-07T20:38:00.000-07:00

I recently started blogging for Developertutorials.com. In this tutorial I explain how to work with Wordpress offline using MAMP, Headdress and Dreamweaver. Check it out here.

Hot or Not For Web Design?

2008-04-07T00:28:00.000-07:00

Commandshift3.com/ is like hot or not for web design. A guilty pleasure and big time killer. Stay away if you've got deadlines!

Free Wordpress Theme: The Unstandard Remix

2008-04-06T23:47:00.000-07:00

Theme: The Unstandard Remix
Author: Jon Gos and Derek Punsalan
Description: A template based on "The Unstandard" by Derek Punsalan at http://5thirtyone.com/archives/886
Based on: "The Unstandard" by Derek Punsalan

Download it from Mediafire

About the Theme

I'm a big fan of Derek's original so I just applied some styling to give everyone ideas as to how to make an "Unstandard" look a little bit different from the rest of the blogs using this popular theme. I'm in no way trying to take credit for the original, but I spent a heck of a lot of time tweaking it to my liking. My version makes heavier use of transparencies and woodgrain finishes.

The woodgrain texture I used can be downloaded from http://www.sxc.hu/photo/947335. The color scheme can be downloaded from http://www.colorschemer.com/. The photo used in the screenshot comes from http://flickr.com/photos/tookie/178243628/. The original "Unstandard" can be found at http://5thirtyone.com/archives/886. I also used one background made at http://bgmaker.ventdaval.com/. I used a few icons from http://famfamfam.com/. Everything else was made in photoshop and the source psds are included so you can modify it all.

Create Fonts Online with Fontstruct!

2008-04-06T15:26:00.000-07:00

Fontshp's Fontstruct is one of the coolest new web apps I've seen in a while. It allows users to create and share fonts that they create using Fontstructs web interface. The UI is easy to use, speedy and incredibly addictive. You'll likely notice right away that some of the fonts they include in the gallery aren't user generated at all, they come from the Fontshop collection of premium fonts. These fonts cost as much as they would normally and Fontshop has done a great job of sneaking them into the UGC in a non intrusive way.

Check it out at http://fontstruct.fontshop.com/

Top 5 Resources for Free Background Patterns and Textures

2008-04-04T13:03:00.000-07:00

As of late, rather than making my own, I've been using an increasing number of web resources for free web resources. The biggest time saver is for backgrounds and textures. Here's a list of the ones I use most.

1. colourlovers.com
Before I discovered color schemer Colourlovers.com was my favorite color resource. But it's still my favorite resource for user designed patterns. Personally, what makes it great from me is the community that rates patterns helping me to gauge how many people are also using a particular pattern.

2. bgmaker.ventdaval.com
This is actually more of a generator but if you head over to their gallery, you'll see what I'm talking about. There's hundreds of user generated patterns here that are free to use!

3. dinpattern.com
High quality, original patterns that I like but don't use for my own work. Still, the UI is simple enough and I really like the preview function.

4. k10k.net
User generated content is all the rage these days and K10k sports a community of pattern makers that create pixelized designs.

5. squidfingers.com
Squidfinger offers a number of free classic and borderline autistic looking patterns, and the gallery UI is hideous. Want to search for only the top twenty patterns? Sorry, you can't. Want to see the most popular pattern of all time? Sorry, you can't.

Design Wordpress Templates in Dreamweaver

2008-04-03T13:32:00.000-07:00

One of my new favorite toys is the Wordpress extension for Dreamweaver which will allow you to make WP templates quickly and efficiently. It's easy enough to install, just download it, double click and install. Your Adobe extension manager may pop up if you're using CS3, but that's normal. Next time you launch Dreamweaver you should see a menu bar that looks like this:

I got it from Vikiworks but he got it from somewhere else that he can't recall. I think it requires atleast Dreamweaver 8 to work properly. Enjoy.

http://www.carbonmade.com

2008-04-02T21:48:00.000-07:00

Great new portfolio site! Check it out over at Carbon Made

Free Font Round Up

2008-03-15T12:50:00.000-07:00

Free fonts....

Com4T Fine Regular

Style-Force Semplice Pixelfonts

Unibody

Silkscreen

Geobats

Birds of a Feather

Butterflies

WC Rhesus B Bta

WC Rhesus Bta

Split Splat Splodge

Seeing Stars

Flower Ornaments

WM Trees 1

SubiktoTwo

Rosegarden

Rose

Chicas y Mujeres

Subeve

Skull TS 2

Color Combinatorics

2008-03-11T00:27:00.000-07:00

Very interesting article about Color Combinatorics by Drew Trujillo

Color Combinatorics – playing off of the branch of mathematics called Combinatorics – is the process of creating a finite number of color object sets based on a collection of individual colors, eventually optimizing the library by eliminating aesthetically displeasing sets. In other words, for this experiment I wanted to write some code that would take the 21 selected colors from the Pantone article and create the 9,261 sets of variations by using the new two-way communication between Photoshop CS3 and MATLAB.

Read on at his blog.

Free Wordpress Theme - Tech Blogger

2008-03-10T10:19:00.000-07:00

Theme: Tech Blogger v1
Author: Jon Gos
Based on: CMS2 by Wonder
Includes: PSDs, CSS, javascript, New Media font, all image files
Plug-Ins: All-In-One SEO Pack, I Love Social Bookmarking, Image Scaler, User Photo and Simple Tags
Notes: Widegtized, Validated and ready to roll!

Download it from Mediafire

About the Theme

I began modifying this theme when I noticed that the author had stuffed it full of his own Adsense codes. I removed them from every page and I also changed the color profile because the original was hideous (purple, orange, blue and green wtf?). The Basic layout reminded me of a few popular tech blogs so I created a logo for it, added some rounded corners and gave it a new name. The download includes source files including the font and PSD used to make the logo.

48 Uses for Wordpress

2008-03-09T11:40:00.001-07:00

Want to roll your own Twitter or Feedburner? Who know of all the things you could do with WP?

48 Uses for Wordpress

Free PSD - Sun Logo

2008-03-07T13:08:00.000-08:00

I was working on a logo for a project and decided it would make a good freebie for you guys. It's another web 2.0 style logo. Feel free to use it as you wish!

Download: Mediafire

Quick Photoshop Tip

2008-03-05T12:53:00.001-08:00

I'm only posting this because I wasn't aware of this myself. If you've downloaded any of my tutorials (like this one) you'll notice that I design fonts and logos in a way that keeps all text editable from start to finish. This way if I need to modify the design (or *ahem* reuse it for another client) I can just pop open a PSD and edit. Well that said, I usually go through each individual layer of text to modify each. I just discovered that I can save myself some time by holding "Apple/Command" and selecting multiple layers, I can make batch changes. For instance: select two or three layers of text so that all are highlighted, then change the font type. All the layers wil be effected.

Since sometimes I'll have four of the same font layered with different effects and layer settings applied to each, this trick saves me significant amount of time.

The Untold History of Web 2.0 Fonts Pt. 1

2008-02-26T19:24:00.000-08:00

Web 2.0 and everything that came along with it has reshaped every industry it's touched, including typography and logo design. I was compiling a list of alternative fonts for Web 2.0 when I started to wonder, "Where do all these fonts come from?"

The result is a list of 7 or so of my favorite 2.0 logos and a brief history of the fonts used to make them. I've also included the estimated price for legal use of each font and a free alternative from DaFont for designers on a budget. If you'd like to read more about these fonts, click the [ref] tags I've included and you'll be taken to my various sources of information. Come back tomorrow for part 2.

Note: In some cases prices are for the entire family and not just individual fonts.

Font - VAG Rounded
Used By - Wayfaring.com
Price - Anywhere from $20 to $104.00
History - Part of the Bitstream family, this original design was first used by Volkswagen A.G. as a corporate face for their advertising and marketing use. [ref]
Free Alternative - Arista by Studio Kmzero
My Opinion - "While it isn't a perfect substitute if you add a few stokes to make it bold, I think you'll find it's closer than it initially appears!"

Font - FF Cocon Bold
Used By - Shozu.com
Price - $40 to $146
History - Evert Bloemsma was attempting 'to eliminate all traces of handwriting' when he created this font in 1998. Apparently he failed miserably as there are indeed traces towards calligraphy. [ref]
Free Alternative - Danube by No Images Fonts
My Opinion - "Danube is clearly more whetted and acuate but it matches FF Cocon in its nod towards industry and mechanics."

Font - ITC Ronda (Customized)
Used By - Last.Fm
Price - $34.50
History - Herb Lubalin designed this font in 1970 around the same time he founded the International Typeface Corporation. [ref]
Free Alternative - Rezland by Fraser Davidson
My Opinion - "Ronda is certainly a classic but Rezland has a contemporary modern edge that I feel works well."

Font - Arial Rounded
Used By - TracksLife.com and MySpace.com
Price - $79.00
History - In 1982 Robin Nichols developed a sans serif typeface for bitmap font laser printers. It was later developed, with Patricia Saunders, into the Arial typeface family which was later chosen by Microsoft as a core font for Windows 3.1 (and subsequent versions). [ref]
Free Alternative - Folks by Manfred Klein
My Opinion - "It's thin and rounded. You can't really be too picky when you're being cheap."

Font - FF DIN OT
Used By - standpoint.com
Price - $269
History - The font's designer Albert-Jan Pool was born in 1960 in Amsterdam and went on to study at the Royal Academy of Arts in The Hague. He was one of the co-founders of a group of young Dutch typographers called "Letters". Many members of that gone on to become famous designers in their own right. Pool is currently working on several new series in order to extend the family of FF DIN. [ref]
Free Alternative - Old Sans Black by Manfred Klein
My Opinion - "The FF family looks so basic but it was pretty damn hard to find anything that came close!"

Font - Frutiger
Used By - Dropsend.com and Flickr.com
Price - $29
History - Adrian Frutiger is the designer of this font, hence it's name. Adrian is widely regarded as of the twentieth century's most prolific typeface designers. The font Frutiger was commissioned in 1968 by the newly built Charles De Gaulle International Airport at Roissy, France. Instead of using one of his previously designed typefaces like Univers, Frutiger chose to design a new one. The resulting typeface was Frutiger, originally called Roissy. It was released publicly in 1976 by the Stempel type foundry in conjunction with Linotype. [ref]
Free Alternative - Verdana by Matthew Carter and Tom Rickner.
My Opinion - "It's come as a default font for computers for as long as I can remember so it wins for convenience."

Font - Avenir
Used By - Purevolume.com and Shutterfly.com
Price - $29
History - The name 'avenir' is French for future, and takes inspiration from early geometric sans-serif typefaces Erbar (1926) designed by Jakob Erbar, and Futura (1927) designed by Paul Renner. Frutiger also designed this font and intended Avenir to be a more organic interpretation of these highly geometric types. While similarities can be seen with Futura, the two-story lowercase 'a' is more like Erbar. [ref]
Free Alternative - Siple by Tomoyuki "Tee-Wat" Watanabe or Am Sans by Volker Busse
My Opinion - "The alternatives too close in appearance but match many of Avenir's basic characteristics: clean, modern and stylish."

11 Ways to Put Your Old Computer to Work

2008-02-25T15:14:00.000-08:00

Like many of you, I've got two or three old computers around the house that are older than five years old. There's the 7 year old HP513, the 6 year old iMac, 5 year old iBook, the TWELVE year old Acer Aspire and so on....

These computers are so old that they aren't really good for much of anything any more. After using quad-core PowerMacs and dual core laptops, going back to a 768Mb RAM, 1Ghz Processor is dreadful. You may be in a similar situation but here are a few ways to make that old computer work for you instead of against the feng shui of your apartment!

1. Make it a Linux Machine
I've always been curious about Linux but aside from a Xandros, I had no experience running it. So the first thing I did with old my Microsoft machines was either replace and reformat the hard drive and install Linux.

It never hurts to have new experiences and now I can say things like, "Can you call me back? I'm installing an adaptive readahead daemon from the command line!"

This is the biggest downfall of Microsoft, I no longer have my OS install disks and buying a version of XP is still so expensive that it isn't worth the expense. So turning to Linux to bring those old machines back to life is your best option. Linux isn't magic, it won't turn your old computers into lighting fast machines, but you've got significantly more control over the speed of your system than using Windows. Not sure how? This tutorial breaks it down for the inexperienced.

2. Turn it into a Torrent Machine
Although the GUI will seem slow as molasses, things like uploads, downloads and file sharing should remain unaffected by the speed (or lack thereof) of your system. On my 7 year-old 513 Pavillion with 768Mb RAM, 1Ghz Celeron Processor machine, I still get up to 40KB/s upload rates and 20KB/s downloads.

So turn that old machine into a torrenting behemoth, especially if it's a desktop and spends most of the time just sitting around any way.

3. Let it Participate in Important Research.
There are programs that you can run that will allow your computer to participate in world-wide efforts to search for extraterrestrial life, analyze micro-protein data, or to cure cancer. Not convinced of the effectiveness of these programs? Discovery Magazine recently researched 14 of them: click to read on.

Supercomputers are expensive, so investigators with lots of data and little budgets have turned to distributed computing: relying on free help from volunteers who download programs onto their home computers and run the software to analyze small chunks of data. The results are then sent back to researchers to crunch further. Just what has come from a decade of such homegrown efforts? We look at 14 programs to see if they’re worth your processor’s time.

4. Simple Home File Server
This tutorial from How to Forge will show you how to turn your old machine into a network-able file server.

5. Make it a Media Server
Who needs Apple TV when you've got a six year old Dell in your basement? As long as you've got the proper codecs and player (Winamp, VLC, DiVX etc.) most machines can still play video back. To integrate your old computer with your home theater system, however, you may need a few extra items. Perhaps a wireless keyboard/mouse combo (estimated cost $50) and you can control the computer from your couch. Or you may want to install a video card with a Video Out connector (avilable for less than $100) will let you hook your PC to your television, eliminating the need for a monitor. A number of new home theater systems accept VGA inputs anyways, in which case you can just go straight from the computer to the television.

The most obvious use though is to use it for backing up and serving your entire digital music library for which you'll just need a cheap 1/8" to RCA audio cable which you can fget from any computer electronics store.

6. Turn it into a Public Server
Every computer is essentially a server, or at least has the capabilities to to serve files. If you have a broadband connection, there are many ways to turn your old machine into a server that could be used to host your own website. Apachee is a free software solution that you may want to look into. Be careful though, many ISPs have a clause in their contracts with you what will prevent high usage of bandwidth for serving websites and files. If you thought Comcast was pissed people who used a lot of bandwidth for torrenting, wait until you try to host a website that gets Dugg!!!! Regardless, here's how.

7. Donate It
There are a number of schools and charitable organizations that could use an extra machine. Who knows, after they find out how you've tweaked it to make it a faster more reliable machine maybe they'll want to hire you to do the same for their other machines. I'm planning on donating at least one of my own to refugee families who've come to the U.S. for asylum.

8. Take it Apart and Sell It For Parts
Believe it or not, a large segment of the population in the U.S. are still using computers older than four to six years old. When you look at the world population computer owners are in the minority, far out numbered by people who have old machines or who don't have computers at all. That said, there is a healthy market for computer parts that are no longer being manufactured or sold in stores. We're not talking lots of money here, but you can almost always squeeze a few dollars out of an old computer just for the prehistoric, hard-to-find RAM that's in it. Ofcourse if you save it long enough, it becomes a 'classic' at which point you can get tons of money fgor it on ebay. (Think Apple 2's or IBM computers)

9. Use It For Back-Up Purposes
Take the hard drive out and place it in an enclosure. The computer may be useless but if the hard drive is still spinning, it'll make a great place to back up files. The catch her is, do you really want your most important data backed up on a half-decade old harddrive?

Alternatively you can keep the computer running and use it for the sole purposes of an additional back-up in case your newer computers crash. Assuming you have a real back-up solution, old computers make great places for redundant back-ups.

10. Use it for Distributed Processing
This ones tricky, but some programs like Apple's Logic Pro are well known for their ability to offload certain processor tasks to another computer. Any Mac can be used for this, Mac Mini's are ideal because they are stackable and cheap enough that you can dedicate two or three to nothing other than node processing.

11. Make it a Word Processing/E-mail Machine
Get a nice flat screen monitor for it, put it in the kitchen, office or living room and make it your household writing system. If you remove all the programs, and reduce system tasks to a minimum, your old computer will make a great text editing station.

Speed-Up Your Linux With Preload

2008-02-25T01:09:00.000-08:00

At my studio I've got quite a few computers but my Linux machine I use for coding and torrenting. It's a 7 year-old 513 Pavillion with 768Mb RAM, 1Ghz Celeron Processor and a new 320GB hard drive that I just installed. Needless to say, it's SLOW! This tip from Techthrob cuts down on App load time...

Preload is an "adaptive readahead daemon" that runs in the background of your system, and observes what programs you use most often, caching them in order to speed up application load time. By using Preload, you can put unused RAM to good work, and improve the overall performance of your desktop system.

Preload, which you can download from SourceForge, is easy to install from the command-line:

sudo apt-get install preload

Check out the full post at Techthrob.com

10 Illustrators for Inspiration

2008-02-22T00:06:00.000-08:00

Here's a list of 10 up and coming mixed-media illustrators, painters and artists revolutionizing the industry in a big way. More than that, their work inspires me to be a better designer. Click the pictures to read more about each or visit their respective websites.

Jeff Soto
jeffsoto.com
Jeff Soto creates large format mixed-media illustrations sometimes up to to twelve feet long.

Ashley Wood
ashleywoodartist.com
Famous for his work on Metal Gear solid, Ashley is well known among gamers and comic enthusiasts.

James Jean
jamesjean.com
Illustrator to the stars, James Jean's work has often been featured in Spin and Rolling Stone Magazine.

Dony Permedi
donysanimation.com
Dony recently received much praise for completing an entire 3D animated short by himself!

Bengal
cafesale.net
France based artist Bengal is well known in the comics industry for his work at DC and Image.

LeSean Thomas
leseanthomas.com
Most know LeSean from his work as lead animator for Adult Swim's animated BOONDOCKS TV series but he's also an accomplished comic artist.

Russ Mills
byroglyphics.com
Russ Mills is a mixed media artist working with biro inks, markers and paint. He's a native of London.

Josh Agle
shag.com
The Socal native Josh 'Shag' Agle is known for his signature acrylic paintings that reference mid-twentieth century style.

Joshua Middleton
joshuamiddleton.com
Joshua Middleton nearly single-handedly sparked a creative revolution at Marvel Comics with his work on the hit series Nyx. He currently freelances for DC Comics.

Tomer and Asaf Hanuka
thanuka.com
Tomer is most well known for his work as a magazine cover illustrator but he's also built a name for himself in the small press comic industry.

Affiliate Links

2008-02-21T19:09:00.000-08:00

These free tutorials, psd files and graphics come at no cost to you but I greatly appreciate link-backs and link exchanges! To get listed on goscreative.com, all you need to do is send an e-mail to (remove the "SPAM") jongosSPAM [at] gmailSPAM [dot] comSPAM.

Site's that already send me ungodly amounts of traffic or who pay for advertising are listed on the front page. Feel free to use the banners below on your websites and blogs.

GOSCREATIVE.COM BANNERS

Advertise

2008-02-21T12:23:00.000-08:00

If you are interested in advertising here email me at jongos [at] gmail

Goscreative.com has served well over 700 downloads to date according to our service provider Mediafire.

As of Feb 22, 2008 goscreative.com has an Alexa.com traffic rank of: 795,141 which you can view for yourself here.

Goscreative.com has a Technorati.com rank of 550,426 with an Authority of 15.

According to Stat Counter in 2007 31,536 visited this site in 2007. By February of 2008 I've already had 15,405 visitors.

According to Google Analytics, Goscreative.com has an average of unique 281.68 visitors a day.

Ofcourse all these numbers will change on daily basis but this is traffic based on this blog's performance in the last year.

Candy Coated Photoshop Tutorial

2008-02-20T23:46:00.000-08:00

In this tutorial I'll teach you how to make a web 2.0 logo so damn sugary sweet it'll give your website a cavity. Then I'll give you the PSD, the font, and all the patterns used in the image so that you can play with it yourself. If you want to skip the tutorial altogether, you can download the PSD here. The beauty of the correct way to design logos in Photoshop or Illustrator comes when we keep everything as editable text layers from start to finish. That way if we need to make changes or reuse the idea, we can just pop open a Photoshop file and quickly output a new version of an old idea. This will also make it easy for you to duplicate my steps.

1. Open up Photoshop and Create a new layer.

2. Use the Text Tool to write something in black using the "Creampuff" font.

3. Choose "Color Overlay" from the Layer Style options.

4. Select a pinkish color. Because it makes most people think of candy or something edible(....like babies). For your reference, I'm using these settings..... Color Overlay >> #9e5859. Let's name this layer 'Base'.

5. Duplicate this current layer twice by dragging it to the layer button two times.

6. Name one of the duplicates 'Hard' and the other 'Sugar'. This is just for the sake of the tutorial, really you could name them whatever you want. Make sure you order the three layers so that 'Base' is underneath 'Hard' and 'Sugar' is topmost.

7. Hide the layer named 'Sugar' for now. Select 'Hard' so we can make it look like hard candy (now you see why I named it that?). Use the following settings in your layer style.

Drop Shadow Settings
Opacity = 50%, Angle = 90%, Distance = 2px, Spread = 3px, Noise = 0%, Layer Knocks Out Drop Shadow = Yes

Bevel and Emboss Settings
Style = Inner Bevel, Technique = Smooth, Depth = 471%, Direction = Up, Size = 8px, Soften = 0px, Use Global Light = Yes, Gloss Contour = Gaussian, Anti-Aliased = No, Highlight Mode = Screen at 42% with a White (#ffffff) Color Setting, Shadow Mode = Multiply at 17% with a Black (#000000) Color Setting.

These settings serve to make your candy text look three dimensional.

8. Next we want to select a Pattern Overlay. This step isn't necessary but a little decoration will make your candy look more appetizing. Before you attempt this, make sure you've loaded 'candy_stripes.pat' into your version of Photoshop.

Make the following setting changes.

Pattern Overlay Settings
Blend Mode = Exclusion, Pattern = Pattern 1 (my choice, you can choose differently), Scale = 61%, Link With Layer = Yes

We're all done making the candy look hard. Now it's time to lick it....no seriously.

9. In this step we're going to make our candy look like someone has salivated all over it...either that or maybe someone dipped it in a sugary sweet candy coating! (note: This is the hardest part of tutorial to explain but you'll figure it out.")

Activate the layer named 'Sugar'. Hold down the 'command' ('control' on a PC) and click on the layer to select all the letters in your word. Add a layer mask to it.

Hit 'L' to select the Lasso Tool and select the 'Intersect with Selection' option. Make sure you CLICK ON THE LAYER MASK FIRST before you go to Step 10.

10. Now that you've selected the layer mask and not your actual text, draw around your selection loosely and fluidly. The idea is to make this look like liquid. It doesn't matter if you go out side of the lines or get too crazy, you can fix it later by editing the mask. Once you've made a selection through the whole word, go back to your starting point and let go of the mouse. This will subtract everything from the selection except for what you've just drawn! (note: click the image below for a close-up view!)

11. Now Make the following settings to the Layer Style of the topmost layer 'Sugar'.

Bevel and Emboss Settings (note: this makes it look like a candy coating)
Style = Inner Bevel, Technique = Smooth, Depth = 100%, Direction = Up, Size = 5px, Soften = 0"

Color Overlay Settings (note: this gives the liquid a bit sugary glow and a bit of pop)
Blend Mode = Overlay, Opacity = 23%

Gradient Overlay Settings
Blendmode = Screen, Opacity = 35%, Style = Linear, Align with Layer = Yes, Angle = 90%, Scale = 100%
Gradient Color = #6f1d1d as the darker hue with #FFFFFF as the lighter hue.

12. Lo and behold you're done! You've got hard candy dipped in sugary sweetness!

13. We COULD stop there but I always like to 'sweaten' (no pun intended) my designs with color backgrounds. Create blank layer. Add a Color Overlay in the Layer Styles and set the color to #0f0702.

14. Add a new layer. Add a Layer Mask. Select the Gradient Tool (Hit the 'G' Key) with the normal black/white colors. Set it to Radial and Reversed. Drag from the center of your image to the outside of the screen. Bam. Instant spotlight. Now add the Color Overlay of your choice.

Simple right? Don't you just want to lick the screen? Of course we could get far more detailed with this but this tutorial is long enough! Make sure you download the files below to make sure you've done things correctly! Email me your derivative works or your improvements and I'll profile them on this blog. jongos [at] gmail [dot] com

Download this Tutorial with all relevant PSD, Font and Pattern Files here! Download just the font here!

Rounded Corners

2008-02-19T13:48:00.000-08:00

In amendment to my last round up of web based design tools, I need to make sure I mention Roundpic which allows you to upload any image from your desktop or any website, and round the corners with a nifty and easy to use UI. It's definitely at it than Photoshop. Check it out.

Web Based Workflow: Tale of The $0 Studio!

2008-02-18T23:37:00.000-08:00

In the past few years we've seen an explosion of free, web and open source alternatives to popular, often expensive, design programs. Well, today I'm raiding my del.icio.us to show you how I started a 100% no-overhead graphic design studio (excluding the cost of my Macbook and internet connection) and began accepting jobs to turn an immediate profit!

Before I begin, this list is not meant to be comprehensive, it's meant to show you my workflow and how it makes me money by saving me boatloads on software. For a more comprehensive list of all the things out there you may want to try this post...

ONLINE WEB DESIGN

1. Wordpress Theme Generators
One Request I get from a lot of clients is for custom Wordpress Templates. TemplatR and Yvo Schaap's Wordpress Theme Generator both offer quick WYSIWYG options for designing themes. Depending on your skill level you can create themes from the very basic to the very complex. I tend to use these sites for the basic skeleton of a good Wordpress Theme. Since I'm fairly knowledgeable of xml, I'll go in and tweak my layouts on the client's server.

These fantastic tools have helped me build a very elaborate portfolio of Wordpress ready 'sketches' in a very short period of time. They've also helped me understand the inner workings of Wordpress as I can see how each produces themes differently.

2. Rounded Corners
One question every designer this millennium has been asked is "Can you put rounded corners on my blog?" You might already know how to do that using CSS but in the case that you don't, try some of the following links: Spiffycorners, Cornershop, Roundedcornr, and Curvycorners. While there are plenty more sites that offer similar tools, these are the four that I use most.

3. HTML Templates
Why design from scratch when you can draw inspiration from the work of others? As long as you credit the creator, there's nothing wrong with using web templates and modifying them. The problem most people have is when someone doesn't chage a thing and tries to pass a design as their own work. That said, there is a huge movement of 'open source web designers' offering up their code to the masses. Among them TemplateWorld, Open Web Design, and Open Source Web Design are my favorites. Most of these designs can usually be easily ported over to your favorite CMS with a little work and coding on your part.

4. Validation
Once you've finished that new web-created website you'll need to validate it to make sure your code is well formated and browser universal. Although I tend to use this extension for Firefox, if you're going to validate online use Validator.W3.Org or some of these other W3 validation tools.

WEB BASED GRAPHIC DESIGN TOOLS

1. Fonts
For the most part I use two sites solely for my font needs: Dafont and WhatThefont.

2. Vectors/Illustrations
Sites like Vecteezy and VectorStock offer hundreds of free vector images for your graphic design needs. Got a picture or logo you need converted into a vector? Use the entirely awesome VectorMagic! I couldn't find any useful online Vector applications but these open source alternatives are free alternatives to Adobe Illustrator or Corel Draw. Try out Xara, Inkscape and Skencil. The platform based Synfig might be worth looking at.

3. Stock Photography
Ofcourse every design studio needs a good library of stock photography. Personally I use FlickR for just about everything, making sure I click "Advanced Search" and selecting the right options to find photographers who are graciously freeing up their work to the public. If I do use work from Flickr, I always send the author a quick note letting them know where it's being used and for what purpose.

There are literally hundreds of photo-sharing websites these days. Of them, Stock Exchange, Dreamstime,Stockvault and ImageAfter the ones I tend to frequent for free work. Of course, there are plenty more sites when you're ready to pay but for now we're pretending we don't have a dime to spend. NOTE: when using these sites make sure that you pay attention to Attribution and CC Licensing. Just because it's free for you to use in some cases doesn't mean it's free in ALL cases! When in doubt, consult the owner directly.

4. Stock Icons
My favorite tools for stock Icons are FamFamFam, FreeIconsWeb, IconFactory and PixelGirl

ONLINE MOTION GRAPHICS, AUDIO, ANIMATION and VIDEO

1. Java
If you read my blog on any kind of regular basis you'll know that Proce55ing is my favorite tool for visual and interactive programming. You can create anything in proce55ing from Web Apps to 3d Animation, to interactive media. All of your processing sketches can also be exported as Java applets and embedded into any web page. Take a look at some of the amazing things you can do in in Processing here. Read more about the project here.

2. Web Based Flash Resources
There aren't really any good web based alternatives to Adobe Flash but if you're going for rich media development I would have to reccomend Open Laszlo. There's also a number of sites that give a away FLV files like FlashVillage and FlashMo.

3. Audio
No one's come up with the web equivalent of Digidesign's ProTools or Apple's Logic Pro yet but there are some great free, open source options. My favorite (as a longtime Protools HD user) is the impeccable Ardour. If you don't need the complex features of a professional application go with the more basic open source solutions Audacity or Wavosaur. All Macs come with Garageband so you're somewhat covered there.

4. Web Based Video Editing
My web based solution for editing video is JumpCut. The desktop based open source alternative I use is Cinelerra. Both are good for editing client footage or creating quick video spots for a page.

5. Animation
Synfig and Proce55ing can both be used to achieve Flash-like vector animation or 3D Modeling.

EDITING ON THE WEB

1. Online Image Editors
Fauxto is a web image editor that attempts to rival Gimp and Photoshop in it's complexity and functionality. It's out of control. Picnik is the one I actually use the most because it's quick and integrates well with Flickr. Ones that I haven't tried but keep hearing about are Pxn8 and SplashUp.

2. Online HTML Editor
Occasionally you'll want to edit HTML online as well. I like FCK Editor, Squarefree and W3 Schools

FREE WEB STORAGE

1. Storing Images Online
One thing that you may be wondering is where I store all the files that I work with online. Images I usually store on Flickr where I deeplink them (this is apparently against the Flickr/Yahoo TOS so don't get caught!). I store everything on Flickr from photos, to logos, banners etc. It's like an online harddrive for me. Another great storage solution is box.net which quite literally aims to be your online hard drive.

2. Free Web Hosting
Occasionally (not often) I'll used free web servers that allow FTP access to host temporary projects or for sharing downloads. There aren't many good ones but I swear by NetFirms. Freehostia, Div Share and Bravenet come highly recommended.

3. Sharing Large Files Online
I use MediaShare for all my large file storing and sharing. Hands down. Nothing else has come close to impressing me. If it's too big for e-mail, MediaShare it. They even have password protection options allowing every file you've uploaded to have different permissions! Their facebook app is pretty slick as well.

WEB BASED INVOICING AND PROJECT MANAGEMENT

1. Invoicing
BlinkSale is my online invoice application of choice. I've used it to bill for thousands of dollars. Hint: to get around paying for the upgrade, select the option to print your invoice and save it as a PDF to your desktop. Then print your PDF file normally! Of course after I used that trick a few times and started making real money I bought a subscription.

2. Project Management
The 400 Pound Gorillas of the project management world are definitely the people at 37Signals! From garage start-ups to multi-million dollar corporations, people love their services and I'm one of them. Of their solutions Basecamp and Campfire are the most useful for me.

3. Spreadsheets, Documentation and Notetaking
Whenever I need to write anything down for a project, if I'm not already using Basecamp, I'm using GoogleDocs. There are other solutions for this, but to try to minimize the growing list of sites I have to log in and out of, this is my choice solution.

There you have it. This is what I started with and I was able to pocket a few thousand dollars before I had to actually buy some real software. The truth is, it takes next to nothing these days to become a creative entrepreneur, all it takes is motivation!

Processing A Programming Handbook

2008-02-06T15:59:00.000-08:00

I haven't done much in Proce55ing lately but I plan on getting back to it soon enough. One of my new tools in helping me learn is Casey Reas' Processing: A Programming Handbook for Visual Designers and Artists from MIT PRess. I highly recommend it as it's full of great examples and instructions that are already deepening my understanding of the platform.

Graphic Novel Project

2008-01-31T20:08:00.000-08:00

I decided to take a step back from art for a while and to work on my writing. Working with a great artist I found through Conceptart.com, I found Kyle Morton, a great artist who contributed to the project. The graphic novel RIFT VALLEY focuses on the current struggles in Kenya. The proceeds are being donated to a great charitable clinic there. Read more about it all and download the six page preview from here.

Apple TimeCapsule

2008-01-15T09:54:00.000-08:00

I haven't updated in a while but I was excited enough about this quarters Macworld that I'm breaking the silence. An Airport Extreme base station with a hard drive inside!? TimeCapsule the newest product from Apple, announced today is described by Gizmondo as:

At Macworld 2008, Apple just announced Time Capsule, a full Airport Extreme base station with 802.11n wireless and four ethernet ports, plus server grade hard drives to back up all of the Leopard Macs in the house. We were hoping something like this would come around, and we'll share details with you soon. In the meantime, let's all celebrate the reasonable price: 500GB for $300; 1TB for $500.

This is the best thing ever. I was really unimpressed with TimeMachine when it debuted because I have a Macbook and I'm always moving around the house. I didn't want my computer tied to my desk. Now I don't have to worry about it because I can replace my base station with something that will act as a back-up server and my wap all at the same time!

OSX Leopard Day 1

2007-10-28T11:24:00.000-07:00

So I upgraded to OSX Leopard this weekend (Apple OS10.5) and my first thoughts are for the most part positive.

Initial observations:

'Spaces' became a feature that I immediately was unable to live without. Far more useful than Expose ever was.

All of my old essential programs still work including Mozy, Quicksilver, Firefox, Transmit, The Adobe CS Suite (Photoshop, Illustrator) etc.

NodeBox and Processing (Proce55ing) still work.

Although I'm not using time machine, it'll be essential to backing up my data and helping me to migrate to new machines in the future.

Coverflow in my Finder is amazingly useful.

The new 'quickview' option for files (just hit spacebar) also instantly became so used that it makes the old versions of OSX hard to use.

Runs way faster and seems to be more stable.

Initial Pet Peeves:

Hardly any new wallpapers although the Leopard space theme is cool.

The new screen savers are silly.

The new MAIL won't let me make custom folders for storing documents.

The new dock, won't let you do the 'fan contents view' if you have it on the left or right side of your screen.

Still no built in OS themes (you can toggle between two colors).

Doesn't feel like an upgrade. The subtle upgrades are much needed and much appreciated but this could have easily been included in 10.4.9.

All in all I feel like considering the amount of time I waited for it to be released and considering all the hype, Leopard isn't all it was cracked up to be. I was really expecting Apple to up the ante on this but much like Vista was to XP, Leopard to Tiger adds some useful features but really isn't anything to write home about.

Particle + Attractor 2

2007-09-26T15:52:00.000-07:00

Made with modified source code originally written by Peter de Jong. Get it at http://www.harukit.com/p5skch.html

Free Goscreative.com Wallpapers

2007-09-25T09:50:00.000-07:00

I've received quite a few requests to make my works available as prints and wallpapers. I decided to do so through DeviantArt. You can download all my work resized with correct wallpaper dimensions from my flickr page. Or download the first collection in it's entirety by clicking this link.

Wallpaper Gallery | Download Collection 1

Processing Test 2 - Fluidity

2007-09-13T13:09:00.000-07:00

My first motion project in Processing. There is no user interaction. Get the source code from the Vimeo page @ http://vimeo.com/306184.

Processing Test 1 (Fluidity) from Jon Gos on Vimeo.

Tutorial: Reflective Eye

2007-09-12T23:00:00.000-07:00

In this tutorial you'll learn how to simply and quickly add the reflection of a scene to your subjects eyeball. I've also included the actual Photoshop session in with notes so you can see for yourself how this is done.

First, create a Photoshop document and import your main eye image and the image you want reflected.

In this tutorial, the background layer is a high quality close-up of an eye. Our reflection layer in this image is a race car and driver.

Slightly distort the layer for perspective. Edit >> Transform >> Perspective.

Scale the reflection layer so that it's slightly larger than the eye, placing the image so that it covers the Iris and Pupil. You may have some overlap onto the Sclera but don't worry, we'll mask that out soon enough.

Now, we need to create a sphere about the size of the Iris. Don't worry if your circle protrudes over the eyelid.

Create a new layer. On this new layer, fill the sphere selection with a solid color and hide it. (We're just going to use this layer to quickly select our sphere later.)

Option + Click the circle layer and then select the layer with your scaled reflection layer. You should have a sphere shape selected over the eyeball. Spherize (Filter >> Distort >> Spherize) the reflection layer.

Use a setting of 75%. Eyes are spherical but they aren't perfect spheres so we don't want our reflection to look like it's on a ball versus an imperfect eye.

Now add a layer mask to selected layer. It should automatically hide everything outside of the spherical selection area.

Select the brush tool. Hit the "D" key so that you can change your colors to the default colors black and white. Make sure you have the mask, and not the layer image selected. Now (remember, with the Mask selected) draw away any parts of your image covering the eyelids or Sclera (the white part of the eye). Use a brush with a hardness of 0% so you can draw natural fades for the reflected area.

I like working with layer masks because they're non-destructive and they allow me to easily rethink my choices later.

Next, change the Blend Option of your reflection layer to "Hard Light". Reduce the opacity to about 80%.

Your composition should be starting to take form by now. Your area in the eye should look like it's reflected.

It's probably also covering the Pupil. Get rid of this by drawing on the Pupil's mask with your brush.

Voila! We now have reflected scenery in our eye. You can fine tune it in various ways. Try duplicating your reflection layer to give the reflection some "pop". Increase or reduce opacity to your liking.

==============

Still not sure as to what I've suggested? Download my Photoshop session for free!

Free PSD Download URL - http://www.mediafire.com/?7xdmgbump4z
FlickR URL - http://www.flickr.com/photos/ww4f/sets/72157601980317914/

Node Box - Day 2

2007-09-12T14:04:00.000-07:00

NodeBox Test 1 (Dots) from Jon Gos on Vimeo.

NodeBox - Day 1

2007-09-09T22:19:00.000-07:00

I'm absolutely in love with Proce55ing but I made a new discovery this weekend, a program called NodeBox which is a lot like Proce55ing in that it allows coders to program within a visual context. Whereas Processing was developed around Java based OOP, NodeBox is based on Python. If it's even possble, it can be said that NodeBox is even easier for novice programmers (like me) to wrap their heads around and start writing very powerful and useful applications. Here's some of the generative artwork I've done in NodeBox so far. Look forward to much more:

Read more about it and download NodeBox here.

Particle + Attractor 1

2007-09-08T17:12:00.000-07:00

More Proce55ing Art

2007-09-07T14:24:00.000-07:00

I created this during some downtime at the studio today...

This image was created using the Metropop, Atrractor and Particle applications in the Proce55ing environment. I've been playing with recoding the apps to do more than what they were originally written to do. The rest of the design was completed in Photoshop.

My inspiration was the Darren Arranofsky movie, The Fountain. In the movie the protagonist travels through space in an orb that carries the Tree of Life. I thought it would be interesting to create an orb that contained the universe itself. Stephen Hawking once theorized that the universe is spherical in shape much like Earth. Anyone living on the surface could easily (and did) assume that it was flat. Traveling from one side of the planet to another would never lead to an edge, thus you can never leave the planet by traveling along the surface. In the same way he suggested that the universe can never be left by 'traveling along the surface'. The secret is another form of travel which we may never discover.

Tutorial: Reflective Bubbles

2007-09-05T14:18:00.000-07:00

For my most recent work I wanted to create bubbles that would reflect my subject in a believable yet magical way. To do this I started by duplicating the main photo Layer >> Duplicate Layer.

Next I scaled the duplicate to 25% of it's original size. Edit >> Transform >> Scale. We also need to distort the duplicate. First I flipped it Edit >> Transform >> Flip Horizontal or Vertical, then I distorted it further by adjusting the perspective. Edit >> Transform >> Perspective

Still doesn't look like a bubble does it? Here comes the fun part. Select the elliptical tool (M) and draw out an area that's a perfect sphere (by holding shift). We want to get rid of everything outside of the bubble, now. So go to the to menu and choose "Select" then "Inverse" (Select >> Inverse) then press delete. You've now deleted everything on the layer that will not be in the bubble.

Press Command + D to deselect everything then Command click on the layer of the bubble. You should now have only the sphere selected.

Now, the most important part of the process, distorting your image to be a sphere by using the "Spherize" option. select Filter >> Distort >> Spherize. Use a setting of 100%.

Now, click on your color window. You want to change your foreground color to a lighter color that is close to white on the color scale. You can use a darker color if you want but to give the illusion of transparency I chose a lighter color, and accented it with darker ones in the steps that follow.

Now we're going to turn the "Sphere" layer into a more believable bubble. We do this by adjusting the "Layer Style" (Layer >> Layer Style). Select "Gradiant Overlay" from the list and activate it. Click on the Gradient window and select "Foreground to Transparent" set the opacity to "Soft Light". Reduce Opacity by 7% down to 93%. Directly to the right of that window select "Reverse" and then change the Style to "Radial". Adjust the scale to your liking.

Next go up to "Blend Options". Change the type to "Color Dodge" (or whatever looks best for your picture). At this point I also adjust the overall "Fill" of the layer to 65%.

Now select "Inner Shadow". This step helps us define the 'spheriness' (I know it's not a word, shut up) of the bubble. In the "Structure" area set the "Blend Mode" to 'Soft Light'. I used the following settings Distance >> 22px, Choke >> 54% and Size >> 45px but experiment and find what works best for you.

For my particular image I needed to create a magical aura around the bubbles. I did this by adjusting my Outer Glow and Inner Glow settings. I also duplicated my bubble several times to create more bubbles. These settings are not relevant to creating a believable bubble so I won't go over them here but the best way to figure out how to get an image like the one below is to experiment.

So there you have it, a finished bubble with a the reflection of your background image!

Proce55ing for Design

2007-08-30T06:14:00.000-07:00

My new favorite design tool is an open source programming environment called Processing (also known as Proce55ing to avoid confusion). The project, which can be monitored at Processing.org was created to teach the fundamentals of computer programming within a visual context.

The best part of processing is that it's an open source platform and many of the projects created in are also open source, allowing you to work with, modify or alter the source code to your own satisfaction. From works like the impressive Fidg't project to the awe inspiring We Feel Fine (closed source).

Check out Processing.org now and start incorporating programing into your works!

The above picture is some of my fashion design work using processing and photoshop.

Interested in learning Javascript?

2007-08-20T16:17:00.000-07:00

Douglas Crockford is the senior JavaScript Architect at Yahoo! and is better known as the as being one of the pioneers (if not THE pioneer) who brought us JSON. Right now Yahoo Video is hosting many of his lectures which are incredibly intuitive and useful for any novice of Javascript programming!

Here's a link to several of his lectures.

Photoshop Key Commands I Love

2007-08-03T13:58:00.000-07:00

D (Default Colors)

Num Keys 1 thru 0 (Tool Opacity Level)

H (Hand Tool)

Ctrl + Alt + Shift + N (Quick New Layer)

Ctrl + Alt + Shift + E (Stamp Visible)

[ (Decreases Brush Size)

] (Increases Brush Size)

Shift + [ (Decrease Brush Softness)

Shift + ] (Increases Brush Softness)

and of course....

Ctrl + Alt + Shift + K (Show Keyboard Commands)

Surfing Beyond The Semantic Web

2007-08-02T09:56:00.000-07:00

We haven't even gotten past the wave of 2.0 applications but someone is already predicting what Web4.0 will be like:

Nova's stealth-mode company is working on what he describes as a "Java-based framework for semantic web applications and services that has some similarities to Ruby on Rails, and also includes a lot of other technology such as our extremely fast and scaleable storage layer for semantic data tuples, powerful semantic query capabilities, and a range of algorithms for analyzing data and doing intelligent things for users." The service that Radar Networks plans to introduce later this year "will enrich and facilitate more intelligent online relationships, community, content, collaboration and even commerce," he said in a recent blog post. In addition, another stealth startup, MetaWeb, is building something to do with the semantic Web.

Given that few predicted how Web 2.0 would come to be defined during the early stages of Web 1.0, the concept of Web 3.0 is still a bit fuzzy, and Web 4.0, the WebOS on Nova's map, is really hazy. The WebOS implies that machine intelligence has reached a point that the Internet becomes the planetary computer, a massive web of highly intelligent interactions.

That person is Nova Spivack and his company Radar Networks isn't just talking about it, they're working on it.

But what exactly is the Semantic Web (a.k.a Web 3.0)?

In the Semantic Web approach, the meaning of the information is encoded using markup languages such as RDF and OWL...Words and concepts in the content of documents and data records can be marked up with RDF/OWL expressions to indicate what they mean -- does a certain word or phrase such as "Lotus" for example, mean a software company, a software product, an exotic sportscar brand, or some other kind of concept? Without sophisticated natural language processing it is often difficult for software to determine this on its own. The Semantic Web provides markup codes that explicitly indicate the intended meaning of information in an unambiguous, machine-readable format...

...But this is really an oversimplification -- OWL and ontologies can actually go a lot further than just defining the meaning of concepts -- they can also define their logical relations as well. For example, how exactly are two things connected and are there any special restrictions on that connection? For instance, an ontology can define that a person's sister must be female, or that a person can only have 1 biological mother, etc....

...The main point here is that adding the semantic metadata does not require the apps that create or consume consume the content to understand natural language, nor does it require people to be XML coders -- even regular end-users can help to define the semantics of content by simply tagging it. The Semantic Web provides a much richer and more expressive framework for doing this than is currently available in Web 2.0 "tags," but it's not that far off either.

What Nova is saying is that the Semantic Web-experience will be one wherein machines can infer the 'meaning of' and 'relationships between' various types of data. For instance say you are looking for information on laptops (an example that Nova Spivak cites...is this guy's name for reals?) across different webstore fronts now. You'll find that many of them will use different terms in place of 'laptop'. Some stores will call them 'portable computers', some 'portable pcs' and some 'notebook computers'...which in this case really all refer to the same thing. A semantic search engine would be able to sense this relationship, either through embedded metadata or tags that users could select, and would turn up all relevant items from across the web.

Big deal right? Google does this now. Not really. Not yet, anyways. Spivack explains...

Another key benefit of using RDF/OWL is that these languages are designed to support formal logical reasoning. By marking up information with RDF/OWL sophisticated search and inferencing can then take place around it. For example, by marking up various people and their social connections it is then possible to infer for example, that Sue is Jane's cousin, that Bob and Dave are colleagues, and that product A is incompatible with product B, etc.

This kind of logical reasoning and inference is essential to enable the next-generation of the Web -- an Intelligent Web -- where software and online services start to help people work, communicate, socialize and shop more productively. For example it will enable something beyond search -- it will enable services that provide answers or suggestions. This is not necessarily important for all applications today, but it will become increasingly important in the future. Content that exists in RDF/OWL essentially has a longer shelf-life and will be easier to reuse, integrate and reason across in the future.

Thus, the search engine...or whatever semantic aware application you're using would 'learn' and continue to learn through trial and error, increasing it's overall accuracy throgh use. Semantics can be thought of as laying the groundwork for the future use of artificial intelligence on the world wide web.

For more ask him not me.

Wall of Web Designers

2007-08-01T17:56:00.000-07:00

One of my favorite well designed web sites is Nick La's N.Design Studio now the owner has launched a new site entitled Web Designer Wall. His latest post spotlights several well designed flash websites that turn the creators illustrations into animation. Link

Howto: Preloading Images With Javascript

2007-08-01T09:45:00.001-07:00

Javascript is the great unifier of Web 1.0 and Web 2.0. It's still highly relevant, useful and almost necessary for new design trends as it was for old ones. One use of javascript is to preload images on a webpage to offer your site's visitors a faster browsing experience. For those of you uninterested in reading my explanation, simply download the code here.

By inserting some simple javascript code into your <HEAD> tag, you will allow your site to load images in the background as the rest of the page continues to load. The vistor's browser will then cache the images and display them wherever they're used on subsequent pages immediately. This works great with all modern browsers, and the people who are on older browsers will still see your images normally, their browsers will simply ignore the script (meaning they won't experience the benefits either).

This is one of my new favorite tricks in designing snappy, fast-loading webpages that heavily rely on images.

HOW TO DO IT

Create a blank text file using Notepad (Windows) or TextEdit (Mac). Copy then Paste the following code into it.

if (document.images)
{
img1 = new Image();
img2 = new Image();
img3 = new Image();
img1.src = "yourImage1.gif";
img2.src = "yourImage2.gif";
img3.src = "yourImage3.gif"
}

Replace the 'yourImage#.gif' with paths to your actual images (ex. img1.src = "photos/momsbirthdaycake.jpg"). Save the file as 'preload.js'. Now, in the header of your document place the following code:

<script type="text/javascript" src="preload.js"></script>

Upload the script, the html document you've included it in, and all the images to your webserver. When you load your page now you should notice an immediate and significant speed increase!

Keep in mind that the pictures still need to initially be cached so the first time someone visits the page it will take some time to download all the pics (especially if you've used a lot) but all subsequent pages will take no time at all to load.

You can follow the techniques above to create your own .js file or just download and modify mine here!

Data Visualization Continued

2007-07-24T23:20:00.000-07:00

Yesterday when I mentioned Data Visualization tools, I was thinking of tools that you and I could use to enhance our vistors experience without coding anything. Today I have to point out the work of Jonathan Harris who's visualization projects are nothing short of spectacular. His projects "Universe" and "Love Lines" are impressive but other projects like "We Feel Fine" and "Phylotaxis" are amazing achievements both visually and in functionality!

Since August 2005, We Feel Fine has been harvesting human feelings from a large number of weblogs. Every few minutes, the system searches the world's newly posted blog entries for occurrences of the phrases "I feel" and "I am feeling". When it finds such a phrase, it records the full sentence, up to the period, and identifies the "feeling" expressed in that sentence (e.g. sad, happy, depressed, etc.). Because blogs are structured in largely standard ways, the age, gender, and geographical location of the author can often be extracted and saved along with the sentence, as can the local weather conditions at the time the sentence was written. All of this information is saved.

The result is a database of several million human feelings, increasing by 15,000 - 20,000 new feelings per day. Using a series of playful interfaces, the feelings can be searched and sorted across a number of demographic slices, offering responses to specific questions like: do Europeans feel sad more often than Americans? Do women feel fat more often than men? Does rainy weather affect how we feel? What are the most representative feelings of female New Yorkers in their 20s? What do people feel right now in Baghdad? What were people feeling on Valentine's Day? Which are the happiest cities in the world? The saddest? And so on.

Definitely check out his work at number27.org, if there are super artists in the coding/visualization world, he's more like number '23'!

Note: An even more comprehensive list of data vis projects can be found here.

Data Visualization Tools For Your Website

2007-07-23T22:19:00.000-07:00

So, the new rage in the web2.0 sphere is flash/ajax data visualization which aren't exactly new:

The use of visualization to present information is not a new phenomenon. It has been used in maps, scientific drawings, and data plots for over a thousand years....

To see a visualization of the sites that I link to and that link back to me, click here. Ofcourse the king of the hill in this arena is Digg with some of the amazing projects coming out of labs.digg.com and Stamen Designs.

Two favorite tools that you can easily incorporate into your site are Walk2Web (mentioned above) and Quintura. Both allow you to create visual searches which can then be linked to from your site. If the information is relevant enough, it provides an easy way for you offer controlled search to your visitors. Rollyo is another tool that's good for the same thing.

Tip: Website Validation

2007-07-16T07:30:00.000-07:00

One of the best kept secrets one the web for designers is a little known tool called 'NetRenderer'. It's a tool that allows you to see what your website looks like in various versions of Internet Explorer. For web designers using Macs, one of the biggest pains is having to check your sites in IE, especially if you don't have an extra PC lying around. This has typically been solved by frequent trips to the library, friends houses, or through other techniques. Geotek's NetRenderer however, is a free useful application for validating your sites in IE7.

Check it out here. From the site:

IE NetRenderer allows you to check how a website is rendered by Internet Explorer 7, 6 or 5.5, as seen from a high speed datacenter located in Germany. Just type in a URL in the field above and try it out - it's free!

Unlike other screenshot services, we are able to process a large number of capturing jobs in parallel and in realtime, making it the fastest service that we know of.

This web rendering tool is ideally suited for web designers working on Apple iMac and Linux workstations. It allows to verify web designs natively on all popular Internet Explorer versions, without the need to set aside several physical or virtual Microsoft Windows PCs just for that purpose

Tutorial: Alien Skin

2007-07-15T13:16:00.000-07:00

Tutorial: "Alien Skin"
Program: Photoshop CS3
Skill Level: Advanced
Approximate Time : 4 hours or more
Keywords: Photoshop, Sci-Fi, Photography, Photo Manipulation

My friend Shairah is an actress and model and recently had some professional photos taken. She generously allowed me to use these photos to experiment with in Photoshop. For this particular project, I was attempting to create an alien skin effect. Using a combination of brushes, dodging techniques and various textures, I successfully achieved my goal.

The Final Image

The Original

Before we start I duplicate the original picture (Apple/Command + J). This gives me an untouched reference photo, or something I can go back to in case of a mistake. It's good practice to always do this when working on photo manipulations.

Step 1 "Desaturate"

My first step was to desaturate the skin. Desaturating the whole photo makes the image look too flat and boring so instead I choose the Sponge Tool (O) and set the Mode to "Desaturate". Select the brush size best appropriate for your photo, changing frequently to get really detailed. I choose a low flow setting of "20%" because I didn't want to over do the technique.

It's tedious but taking the time to sponge the flesh better allows for certain nuances that would potentially occur in nature. I purposefully limit the effect around the eyes and lips.

I started with the face then worked my way down to the rest of the body. After The skin was desaturated I further reduced some of the colors in the image to help set a darker mood.

Step 2 "Overlay"

After desaturating the skin apply texture by overlaying images. I found some great large format 'grunge textures' here.

This particular texture was 'spotted' rust on a grey wall. I imported the layer into the image and made it the top layer. I set the layer's Blending Options to "Linear Burn" with a Fill of "30%". I reduced the fill until the spots from the texture more evenly matched the skin.

Of course your textured layer is going to cover the entire image, even the areas you don't want it to. Use the eraser tool on the top 'texture' layer and use it on areas like the hair, eyes, lips and clothing. You only want the skin to be textured. Attention to detail at this point is key. As a rule of thumb, never use an eraser brush with 100% flow for retouching. I typically set it around 70%.

Step 3 "Dodging and Burning"

Once your skin is textured, you may notice that it looks a little flat. In reality skin has shadows and highlights that we need to simulate. Part of this was achieved when we reduced the Fill of the textured layer. That allows enough of the original images skin to show through and it already had highlights and shadows. What I wanted to do now is recreate the same effects on the texture layer. First, I selected the Dodge Tool (O). I set the Range to "Highlights" and the Exposure to "28%".

After selecting the appropriate brush size, I targeted all the areas of the original image that had highlights. These are the areas where light is the brightest on the contours of the face....areas like the bridge of the nose, the cheek bones, the brow, and the contours of the breasts. Once the highlights are done, switch to the Burn Tool (O) and do the same for the shadows. Make sure you are still editing the texture layer and not the original image. Set the Range to "Shadows" and the Exposure to "37%".

Now, brush over all the areas where the original image has shadows. These are areas where light isn't hitting directly and usually areas opposite of the highlights. For areas where the shadow is extremely dark you want to spend more time burning (or increase the exposure percentage for those areas only).

Step 4 "Detailing"

Before I moved on, I wanted to add a bit of detail to the face. I did this by using the same toolset we've been using to detail the texture layer. Using the Burn Tool again, I brushed the lips and around the eyes. The effect is subtle but makes the resulting image more believable. Next I selected the eraser brush and set the Flow to "10%" and targeted areas of the texture layer that I felt stood out to much. This didn't erase those areas it just reduced them a bit. Part of this is guessing, part of it is patience and part of it is experimentation. Play with your image and the Photoshop tools until you get the effect that you like.

In "Part 2" of this tutorial I'll continue discussing this piece and I'll discuss adding effects to the eyes and how I 'finished' the image.

- Jon

Free Download: Web 2.0 Folder Icons

2007-07-14T10:16:00.000-07:00

I created the icons above using a tutorial found here. It was my first attempt at creating my own desktop icons. The planet and locked document icons come from Everaldo's famous Crystal Clear Icon Set. Enjoy!

Free PSD Download "Glossy Folders" Download Files | Preview File

Free Download: 700 Icons!!

2007-07-10T17:23:00.000-07:00

While Alpha testing Kevin Rose and Leah Culver's new Pownce application, I discovered this neat little site ran by Britain bound designer Mark James. He's offering an astounding seven hundred free Icons for download. The icons are all easy to incorporate into your designs (they're offered in .png format) and are perfect for applications, websites or blogs. Download them here! Please note the attribution license they are protected by.

Free Download: Fluffy Clouds

2007-06-25T09:13:00.000-07:00

Sorry I've been absent all weekend, I'm actually working on some tutorials for a few of the previous weeks designs. For now, here is a is a free download of clouds and a blue sky.

Free Photoshop PSD of 'Clouds′ Download | Preview

Free Download: Deep Space

2007-06-25T09:12:00.000-07:00

I've never tried to create "space" from scratch before so I decided to give it it a try. The result was this:

The original.....

I was impressed enough with the results that I've decided to share my space background with you guys. Experiment with it and send me links to your creations! In it you'll find plenty to play with, download the planet from a previous post here and really get crazy! There will be a tutorial for this technique coming soon....

Free Photoshop PSD of ‘Deep Space′ Download | Preview

Free Download: Water Droplets

2007-06-25T09:11:00.000-07:00

Photoshop is truly amazing, you can use it to create almost anything. For this design I wanted to create the illusion of water settling and collecting into beads on top of an image. The result was not perfect but came very close!

Download the accompanying files, substitute your own images and see if you can improve!

Free Photoshop PSD of water droplets on image Download | Preview

Free Download: Floral Design

2007-06-25T09:10:00.001-07:00

While looking for decorations to use for some wedding photos I took last week, I discovered this amazingly detailed font called Helena (designed by Marcio Hirosse). Helena is a beautiful work of art and design. The attention to detail is amazing as it doesn't matter what combination of letters you use, the foliage always comes out in perfect alignment.

So I combined Helena with this stock photo that I found on the website stock.xchng and created this design:

In the attached PSD, you will see how I created this effect and you'll be able to use the files to modify this image or substitute the stock photo for one of your own.

Free Photoshop PSD of this ‘floral design’ Download | Preview

Make sure to download and install the demo version of Marcio's font Helena here first, otherwise the PSD will not open correctly.

Free Font: Chic Decay

2007-06-25T09:08:00.000-07:00

I found this free font on bittbox.com. It's pretty fancy with a Victorian feel. It works really big for "goth" style backgrounds or just as well at normal size. It's called "Chic Decay" and was designed by Gyom Séguin.

Download it at DaFont.

Free Download: Glossy Button

2007-06-25T09:07:00.000-07:00

Today's freebie is a glossy button that you can use for your websites or DVD menus. Make it smaller by resizing the image. Enjoy!

Free Photoshop PSD of a 'glossy button' Download | Preview

Free Download: Web 2.0 Style Logo

2007-06-25T09:06:00.000-07:00

So Web 2.0 is all the rage these days and whether you like it or not, it seems like it's here to stay (until the next design fad comes along). I created this logo for a customer of mine a while back using open source tools I found at aaronovadia's website. By modifying the file (that he also generously gave away for free) I was able to create this 'puffy' but appealing logo for a client.

This file includes the fonts used ('Unicorn' and 'Arial Black' ) for your convenience.

Free Photoshop PSD of a 'Web 2.0' style logo Download | Preview

Free Download: Planet or Moon

2007-06-25T09:05:00.000-07:00

For a recent design, I needed a graphic of a planet. The project was for my other company "Sphere of Sound" [link] which offers post-production, mixing and sound design for film and TV. I needed something eye catching, yet sleek and professional, with an emphasis on the 'sphere' part of the title. I wanted that to convey a certain sense of sci-fi surrealness as sound design is very creative and esoteric work. When people see my work I want them to think of the same high fidelity audio they would expect when they see a Dolby, THX or HD-DVD logo. This was the final resulting design...

My thoughts: The "sphere" is rugged and terrestrial while the "of sound" is bold, polished and sleek. Thus, the logo is dynamic while remaining creative and conveying professionalism.

As you can see the planet is prominently featured along with text that looks as if it were protruding from the side. In a future tutorial I'll show you how to create a similar effect but for now here is a link to a PSD file of the planet pictured below which I made in Photoshop CS3.

Free Photoshop PSD of a Planet or Moon Download | Preview

Welcome to Gos Creative

2007-06-25T09:04:00.000-07:00

GOS CREATIVE is a site that exists to allow you to download and modify free design templates and other files! These open source designs and tutorials are meant to act as the starting point for your creativity.

Free Download: Easy Photo to Sketch!

2007-06-25T08:58:00.000-07:00

When Photoshop introduced the 'smart object' in CS2, designers across the globe probably created a hurricane from the collective sigh of relief they let out. No longer did we have to dupe layers for every step of applying filters (in case we wanted to go back and try things differently). Now you could simply make a layer or group of layers a smart object and apply filters and effects, rearrange them after the fact and so on.

What's especially good about this approach to handling layers is that I can share designs with you that you can simply plop your images in place of mine instead of having to follow a number of steps trying to recreate the same effects. I'd rather see you spend that time improving upon the path I've laid before you!

Today's design does this! For my project I wanted to create n image of myself that looked like it was turning from a drawing into reality, something similar to AHA's "Take On Me Video". Using a combination of High Pass (under 'filters' then 'other'), Note Paper (under 'filters' then 'sketch'), my levels and the layer blend options, I created the following:

I was pretty proud of the end result as it was my first experiment with the technique and it worked really well.

For the free template I wanted to get even fancier and attempt to retain the original colors of the photo instead of using primarily black and white. I managed this using smart layers and masks. You can see the result and download the template below. If you have CS2 or CS3 simply open the file and replace the photos in each smart layer, there's very little work for you to do!

Free Photoshop PSD templates for turning 'photos to sketches' Download | Preview

Free Download: Web 2.0 Stars and Bars

2007-06-25T08:57:00.000-07:00

So I was playing around with creating the "stripe" effect used in a number of web 2.0 designs. This was the resulting design:

This PSD is 100% customizable meaning you can scale the bars, change the fonts, colors darkness and lightness of everything in it immediately without having to recreate the effects.

Free Photoshop PSD of the ever popular web 2.0 ‘stars and bars’ Download | Preview

Services

2007-06-25T08:02:00.000-07:00

Still fleshing this page out. Try this one instead!

Donate!

2007-06-25T08:01:00.000-07:00

Running a free design service is immensely expensive. I have to cover bandwidth charges each month, monthly web hosting, my own time spent creating these works, and new programs that I review and use. With that in mind, if you are interested in donating $1.00 to Gos Creative to support this site and to keep the free stuff coming, please click on the following donation link:

If you would like to donate another amount other than $1, please send your paypal donations to the following e-mail address jongos@gmail.com.

About Me

2007-06-25T08:00:00.000-07:00

My Bio Will Return Shortly. Until then visit me on LinkedIn

Welcome to Gos Creative

2007-05-30T22:58:00.001-07:00

Gos Creative is your source for free blog templates, free web design templates, free graphic design and many other tools used for open source creativity.