BoxedArt.com Web Design Blog

Our 7 Favorite jQuery Template Effects

Cubert — Tue, 27 Jul 2010 03:27:06 +0000

Regular visitors of BoxedArt will have noticed the recent jQuery section on the site. If you’re still a little green to jQuery, the best way to explain it is that it is a client side scripting language (meaning that all activity occurs in your web browser, and not on the web server), and it creates an interaction between simple HTML and Javascript. What this means, is that there can be dynamic and interactive action on a website without using a scripting resource that requires a browser plug-in, such as Flash or Swish. It also lets you use simple HTML text within the content, so it doesn’t require additional software to manage a site.

Anyway, for those of you that don’t need the lesson and are here for the eye candy, below you’ll find a list of our 7 favorite jQuery scripts and effects that we have used in our new jQuery template category so far:

#7 Portfolio Image Slider

A slider is a good tool for showcasing a variety of images on the homepage of your website. You could use to to show off your design portfolio, provide snapshots of your services, or even give a quick tour of what you offer. The “Easy Slider” from cssglobe.com really is just about the simplest possible method out there for adding a plug-in slider.

Get the Slider jQuery Script

Where We Use It:

This was one of the first jQuery scripts we implemented. It can be found in our Drafting Table portfolio template:

#6 Style Switcher

The style switcher by Kevin Luck, or style sheet chooser, is a script that lets your visitors change the style of your website with a single click. The premise involves creating multiple style sheets that all contain the same css classes but with different properties. When the user selects a link for a particular style, the site switches from the default style sheet to the new one selected. It’s a really simple way to add new interest to the design of your site.

Get the Style Sheet Chooser jQuery Script

Where We Use It:

We added the style sheer chooser to our Design Star web design portfolio template to switch between wild patterned backgrounds:

#5 Multi Level Drop Down Menu

Drop down menus are a tidy way to organize your navigation links, especially if you want to give users direct access to a sub page within a main section without having to hop through several pages. The unhiply named “jQuery Multi Level CSS Menu #2” by DynamicDrive.com gives this option, but allows a navigation system that goes 3 levels deep, switching between vertical and horizontal drop down links.

Get the Multi Level Menu jQuery Script

Where We Use It:

The multi level jQuery menu adds a level of depth to the trendy 5 Band music web template:

#4 Custom Content Slider

Not to be confused with a main image slider, the content slider actually contains all of the content for your entire site. This means than you will not have multiple HTML pages, and all of your site’s content will be contained within a single HTML file. When you click a button that sends a user to a new page, you simply scroll through to the next section of content. It provides an appearance similar to frames, but I assure you, there are no framesets in this code.

Get the Custom Content Slider from Queness

Where We Use It:

Our cutesy Pet Club website design uses this script to scroll through the content without requiring a reload for each page:

#3 Horizontal Javascript Accordion

This script is 1kb of pure awesomeness. It has a similar purpose as an image slider, but instead of sliding your images, it expands and reduces them, enlarging the selected image to full width on hover, and reducing the others back to tab sized. This cool little script is from leigeber.com.

Get the Horizontal Javascript Accordion

Where We Use It:

You could lose hours (or at least minutes) playing with the accordion menu installed on the Big Wind and Solar clean energy template:

#2 and #1 Corner Peel & Accordion Content

The final two of our top 7 favorite jQuery template effects are actually contained within the same web design, so I figured why not demonstrate an act of efficiency and group ‘em together?

Corner Page Peel Effect
There’s no better way to add an announcement that will be seen by all of your users on any page of your site. This effect allows you to add some little icon or image to the corner of the page, and then display a full sized promotional message when the user clicks it to peel the corner away.

Get the Page Peel Effect

Accordion Content

Looking to combine the playfulness of an accordion menu with the sleek functionality of the custom content slider? That;s exactly what’s done with the Stemkoski’s “Stupid Simple jQuery Accordion Menu”. It makes navigating your website’s content an absolute blast!

Get the Stupid Simple jQuery Accordion Menu

Where We Use Them:

Both these playful effects have been lovingly applied to the Faber College education template:

The above jQuery effects vary in usefulness, admittedly, and I know we have used scripts that have a far more functional benefit. However, these are my favorites, and are often playful and fun. There are dozens of other jQuery scripts used throughout our jQuery template section as well, so feel free to take a browse through all of our current jQuery Templates.

50 Ways to Earn Commissions

Cubert — Thu, 22 Jul 2010 09:05:36 +0000

The BoxedArt affiliate program is offering a special increased commission rate of 35% (usually 25%) through Halloween (October 31, 2010). We’re also giving high performing affiliates (affiliates that provide a dozen or so sales per month and/or 75+ hits or so a day), the opportunity to permanently retain their rate. To help in promoting your affiliate links, we’ve assembled a large group of our banners, and have composed a list of promotion ideas to the tune of Paul Simon’s “50 Ways to Leave Your Lover.”

50 Ways to Earn Commissions

You just slip in a tweet, Pete
Write in a blog, Dog
You don’t need to add spam, Dan
Just post casually
Start a new thread, Ted
Don’t need to be a mod, Rod
Just drop a text link, Wink
And direct it to me

You just mail to your list, Miss
Post to your Wall, Paul
You can give it a like, Ike
Just include your affil. ID
Use Google Ads, Babs
You won’t need to budget much
Just grab a banner ad, Tad
And make some money

Affiliate Program Details

BENEFITS

Participation is FREE!
Large ~~25%~~ 35% commission paid on each sale!
Our all access membership creates the highest conversion rates, earn frequent commissions!
Activation is INSTANT!
Affiliate cookie and IP tracking is good for a year, earn commissions from visitors you sent months ago!
Real-time instant tracking and reporting!
Instant automatic email notification sent for all commissions!
Add value to your site without the hassle, we handle billing, processing, tracking, payments, and everything else!

Note: The affiliate program does not permit self referrals, but please do refer your friends, customers, clients, visitors, and colleagues! If you don’t have any colleagues, you may substitute your peers.

BoxedArt Cloud Banner Set

Download BoxedArt Cloud Banner Set

BoxedArt Green Priced Banner Set

Download BoxedArt Green Prices Banner Set

BoxedArt Valid Template Banner Set

BoxedArt Assorted 125×125 Banner Set

BoxedArt Assorted 728×90 Banner Set

BoxedArt Interface Banner Set

Complete BoxedArt Bannner Set

Complete BoxedArt Banner Set

Join the BoxedArt Affiliate Program

Eerie Technology Predictions from 1982

Cubert — Tue, 20 Jul 2010 10:06:08 +0000

I recently came across an old copy of a “Video Review” magazine from December, 1982, a publication that now seems to be out of print. This issue contained an editorial column called “VIEWPOINTS” with the subtitle “New Ideas for 1983”, which featured guesses at what might be developed in the near future. While the technology did not show up the following year, the predictions were freakishly ahead of their time, and nearly each one now appears in our modern lives.

In this post, you’ll be amazed, astonished, flabbergasted, and drunkened by the accuracy of these technology predictions from Video Review’s David Hadju back in ’82. If by the end of this post you still don’t feel drunkened, don’t worry, I’ve drankened enough for the both of us.

The Original Printed Article

Prediction #1:

What was Predicted?

This is a perfect description of the basic functions of Tivo and other digital video recorders. The author, David Hadju, was 17 years ahead of his time with this prediction.

Prediction #2:

What was Predicted?

Flat screen? Microprocessors? Video walkie talkie? It’s as though Mr. Hadju was in possession of Apple’s stolen iPhone 4 prototype before passing it along to Gizmodo’s Jason Chen. I think Apple may need to send the time police back to offices of Video Review and confiscate their 80286′s and commodore 64′s.

Prediction #3:

What was Predicted?

The wireless media center has been under development by Motorola since 2001. It’s able to broadcast music, dvds, computer content, photos and videos from digital cameras, and much more between a variety of devices over a home network without a single wire (except perhaps for a few dozen power cords; Tesla’s wireless electricity is still a little far fetched at the moment, but we’re not here to talk about Tesla We’ll talk about Tesla next Tuesday on Tequila night.)

Prediction #4:

What was Predicted?

This prediction was not as prophetic as the others; I’d say it was more of a technological inevitability. However David was once again correct, and modern video cameras can double as a virtual editing room without needing additional equipment.

Prediction #5:

What was Predicted?

This is the only prediction that failed. Betamax had all of the success against VHS that Toshiba’s HD-DVD had against Blueray. Beta was finally retired by Sony in 1988, going to show that Japanese technology companies will never achieve success.

While Davey didn’t get all predictions correct, 4 out of 5 is pretty amazing, especially considering the scope of the predictions, and how bad many predictions turn out (old popular science magazine enthusiasts will know what I mean.) In defense of prediction number 5, the concept of a combo player did finally make it to market, in the format of a DVD/VHS combo player, so maybe we’ll give Dave a 4.25 out of 5?

Text Version of Column:

(In case your eyes are bad from too much computer use.)

Ever want to scream right through the TV screen to a movie character who, say, doesn’t know he’s walking into the barn where spacemen have planted their death ray? Well, that’s how I feel this time of year. Every December, Video Review takes a hard look at all the video developments of the past 12 months for our annual review of the Best and the Worst Gear of the Year. Then we turn to video’s leading inventors, engineers, and other insiders for the first peek at what’s in store for the coming year. But after pouring over every video development of the near past and the near future, I look at the year’s files of data and feel like yelling “Hey, why don’t you guys really to this?”

It might be as useful as hollering at a TV set, but here’s a brief look at a few different ways the video-equipment powers that be could have gone in their ’82 plans:

TV Sets with “Special Effects.” Through an inventive union of frame-storage and time-delay technologies, TV sets ad monitors could incorporate virtually all of the special features now employed only on VCRs and videodisc players. That way, viewers of broadcast and cable-TV programs could use freeze-frame, frame advance, and slow motion on shows while they’re being broadcast.
Video Walkie-Talkies, Or “walkie-watchies.” With microprocessors and the first flat-display picture tubes, there’s nothing preventing the development of personal, two-way TV transmitters/receivers-except perhaps the FCC.
Wireless Video Components. A pet idea of VR’s managing editor, Deirdre Condon, wireless components could put an end to the headaches-and the electrical hazards-of interfacing the growing number audio/video/computer components essential to a top-grade modern (or is that “postmodern”?) electronics system.
Optical-Effects Videocameras. Technically, it’s far simpler to achieve moviemaking optical effects such as “dissolves” and “wipes” with video than with film. Yet, for all their sophistication, no consumer videocameras have ever been built to handle such effects.
Beta/VHS VCRs. Hardly our idea by and means, the prospect of one video recorder being able to record and play videocassets in both of today’s major (and totally incompatible) VCR formats has probably struck everyone who knows there are different formats, Everybody in video talks about this one-except the folks making Beta and VHS.

A Decade of Design Evolution

Cubert — Sat, 10 Jul 2010 20:23:57 +0000

Web design styles have been evolving rapidly in recent years, and the design industry has sprouted up like an over watered Chia Pet, incubated in an industrial green house, and crammed full of Miracle Grow laced with crystal meth. I clearly remember the time (circa 1990′s) when the only sites available to help you put up your website were along the lines of cgi-resources.com and htmlgoodies.com. You got a basic script that did mostly what you wanted, hacked away at it, and tried to figure out how to make some sort of basic layout nesting and re-nesting tables until finally a family of birds moved in.

Themes? Templates? Skins? There were a few “free template” sites around back then, but they were fairly obscure, and commercial templates were virtually non-existent. A script came with one look – plain, and if you wanted to change it, you spent a few weeks in Paint Shop Pro or Photoshop pasting together graphics and inserting rotating gifs. If you have no idea what I’m talking about then you haven’t been webmastering until sometime in the 2000′s when starting up a site had become easier and prettier.

Since commercial template design entered the scene in the 2000′s, the styles on the market have been constantly changing, especially over the last few years. Below, we’ve compiled a comparative sampling from 2001 through 2010 showcasing the evolution of designs. You’ll be shocked at where we started with our layouts and just how far we’ve come.

2001: The Year One Experiment

BoxedArt’s Home Page in 2001

BoxedArt was introduced in 2001 with just 4 sections: Templates, Interfaces, Mascots, and Photos. There were not many, if any, other commercial template sites around at the time, and we followed the template trend from our network’s free template site. It was really the first time that website owners could purchase ready to use layouts to apply an instant format to their website’s content. Here’s how it began:

One of BoxedArt’s First Templates

This was one of BoxedArt’s first templates. Heck, it was one of the first commercial templates ever released on the web. No PSD files included, no text prefilled in the content section, and no photos used in the layout. Just a simple table based layout with 16 monochrome gifs.

All templates added during this year were from the same designer and followed a similar trend:

Additional First Edition Templates

Later in the year, we got fancy and added mascots, banner positions, an text indicating where you placed the content, just in case you were unsure where it went:

Style From End of 2001

2002: From Experiment to Establishment

By the end of 2002 we had updated our look several times. There was a lot of trial and error figuring out what worked and what didn’t. The below site design went through several revisions; we removed network sites, altered the content layout, and we also simplified the template access plans. Previously, it was some awkward mix of download credits + access length. We changed to an “all access system” instead, which was much cleaner. Little did I realize at the time, that we had set the model for what would be copied innumerably, down to the site’s welcome text. Looking back, I’ve also noticed how clear the call to action was on this design, long before I’d heard of that phrase.

BoxedArt’s Home Page in 2002

The templates also began to evolve throughout 2002, however, the earlier designs of 2002 mimicked those released throughout 2001. The concepts were very simple, and generally provided no text in the content are. However, the graphic quality improved, as did the use of creativity, and we did advance to the level of including .psd files with our downloads:

Early 2002 Templates

We also had a few that weren’t created by experienced designers, and these were cruder than BP’s oil spill. However at that time, there still weren’t many commercial templates out there, and these were still proved to be somewhat popular for early 2002 releases:

Crude Mid 2002 Amateur Templates

We also introduced flash templates, however the flash effects were extremely underwhelming, and the designers that developed these flash themes were not as adept at website design as the newly hired HTML template designers:

First Flash Template Attempts From 2002

In the later half of 2002, we employed the services of more seasoned web designers, and the template changes were more drastic than than this comedian’s response to a heckler. We finally see content filled in throughout the templates, a variety of layout configurations, a liberal use of stock photos, and creative navigation systems. These are the first true commercially viable templates, and some of these styles remain relevant even today.

Late 2002 Templates

2003: A Glossy New Image

I still look back at the design from 2003 fondly. It was the site’s first layout that wasn’t sort of pieced together. The design was very glossy and candy-like, and we created over a dozen versions and styles for the site, refining the final concept numerous times both pre and post launch. The main category count for product types also ballooned to 12, and the limited edition and custom design sections were added to the site.

BoxedArt’s Home Page in 2003

In addition to the changes to the look of the site, we also further evolved the template packs with contributions by designers that were years ahead of their time. The designs now contained multiple pages (typically 3-5), more detailed graphical work in Photoshop, and a very wide range of styles; many with a glossy sheen. A lot of the templates designed in 2003 are still in use by websites across the web, and still look pretty professional.

A Selection of Templates from 2003

We also learned that we could we could improve our flash layouts by simply animating our HTML designs, and we began producing flash and non flash versions of every template released.

2004: Piling on the Products

There were no major site design revisions in 2004, and instead we focused on rapidly increasing the range and volume of products added. By the end of the year the site reached 24 categories of member products and 6 categories of limited edition downloads.

BoxedArt’s Home Page in 2004

In addition to adding more products and web templates than ever before, BoxedArt also acquired the talents of even more skilled website designers, and the quality of templates continued to flourish. You’ll also notice that the trend of the era was geared towards more graphically intensive designs; 3d graphics were especially popular.

A Selection of Templates from 2004

2005-2009: A Move Toward Sophistication

2005 introduced the longest running design in BoxedArt’s history, which stood for four years. For this style, we took the bright candy colors from the 2003/2004 design and integrated them into a more sophisticated concept. We also placed the latest updates across the top of the page to give a visual of the best of the updates, rather than just the update section at the bottom of the page. Additionally, with this layout, we started playing with the “box” theme from the BoxedArt domain name, and integrated it into the logo and the welcome section. As with every major relaunch, additional product categories were also added, and the site swelled to 36 member sections.

BoxedArt’s Home Page from 2005-2009

During this period we had more designers creating templates than ever before. The designers pretty much had free reign over the creative process, and the concepts ranged from odd and conceptual, to fairly simple and practical. There was still a fair bit of the heavier graphic styles, and a few were more unusual than when the Great Gazoo joined the cast of the Flintstones in Season 6 . We also first began using table free CSS code and validating templates during this time as well.

Chronologically Displayed Templates form 2005 – 2009

2009-2010: Going Postal

Finally, we’ve reached BoxedArt in it’s present state. The current design was implemented in October 2009, however, the design process for this layout actually began in early 2008. After a year and a half of dull concepts, we decided go with a play on words and make the entire look like a big brown box that had been sent through the mail with stamps, a mailing label, tape, and lots of other related effects. The design was incredibly well received, and a tutorial was also published on the design process, which itself was listed as a tutorial of the year on many popular blog design sites. In addition to the new look, a slew of new categories were once again added (including social media templates such as twitter, ebay, myspace, etc.), as well as a developer document section http://www.boxedart.com/developers.php, which featured custom written and creatively formatted contracts, spread sheets, legal documents, checklists, and many other related items that web developers could use while working with their clients. Further to this, the licensing terms of BoxedArt were also simplified with the introduction of developer plans, allowing website developers to design websites for an unlimited number of clients without requiring a lot of vague alterations to the templates.

BoxedArt’s Home Page from 2009-2010

The most recent template trend has been to provide the most simply usable layouts possible, while still maintaining a creative spark. We introduced jQuery effects, increased resolutions drastically, added multiple level navigation, and much more. This revolution in template style required documentation to be developed for template designers, providing specific style examples, design trends, jQuery script examples, and sought after themes.

Moving Forward

We’re already in the early stages of a new plan for BoxedArt’s design and identity. While there are many great elements with the current layout, there were also a number of missed opportunities that we plan on revising and filling in. We’re also working hard to poll our users to find out how we can improve our template designs and other product sections.

In conclusion, the web design industry has been through dramatic changes throughout the years, and nowhere is this more evident then on BoxedArt. It’s template section is a virtual time machine of design styles, trends, and breakthroughs over the course of an entire decade. I leave you with a side by side comparison with one of our first ever added templates and one of our latest. The evolution is simply extraordinary.

Template from 2001 vs Template from 2010

A Handy Guide to a Carpenter’s Logo

Cubert — Sun, 13 Jun 2010 02:26:47 +0000

It takes the right tools to make the right tools, and using those tools can be easier than you think. Today’s tutorial guides you through the making this handy carpenter’s logo, and shows you that you can make a design pop with several simple but invaluable methods. In conclusion, you should keep these techniques near the top of your tool bag, as they might just be the right tools for your next job.

You can download the Nailed it Logo or the Nailed It Promotions Products Set with full PSD and AI source in BoxedArt’s members section, as well as thousands of other website templates and web design products. Get a membership here.

Step 1: Create and Color a Circle

First, let’s start with a new document with the size of 800 x 800 pixels. Now, create a new layer, select Ellipse Tool (U), set your foreground color to #daac73, and draw a circle that fits the canvas.

Step 2: Add Inner Shadow to the Circle

Now, let’s add some effects to our circle. Right click on your circle layer, then go to Blending Options, Inner Shadow, and use #e4b71c for multiply blend mode, capacity 89%, and size 87 pixels.

Step 3: Bevel and Emboss the Circle

Then, go to Bevel and Emboss, select Inner Bevel style with the following settings:
Depth 1000%, size 10 pixels, soften 16pixel, #b26300 for the color, dodge highlight mode, and #4e281d for the multiply shadow mode.

Step 4: Apply a Gradient Overlay

Next, go to Gradient Overlay, select Soft Light for the blending mode with 76% for the capacity and scale 135%

This is how your circle looks after completing steps 2-4:

Step 5: Add an Image to your Logo and Emboss it

Now let’s find your image and place it in the canvas. Obviously for this theme a tool image will work best, but you can use this same technique to create a logo for any topic.

After the image is placed onto the circle, we need to give it a little depth, so we will emboss it. Go to your image layer, right click on it, select Blending Options, go to Bevel and Emboss, select Outer Bevel Style, enter 674% for the depth, size and soften 16 pixels, use #fdda9c for the lighten highlight mode, and #b67833 for the multiply shadow mode.

This is how it looks:

Step 6: Duplicate the Image

To enhance the aesthetics of the logo, we will add in a second image and criss-cross it across the first one so that it looks like a cress. The easiest way to do this is to create a duplicate hammer layer. Therefore, go to your hammer layer, right click and select Duplicate Layer. Then, click Free Transform (Control T) to rotate and move your hammer to something shown below:

Step 7: Add Your Text

Now, it’s time to add your text. This logo uses the font face called Impact and the color of the font is #b67833. Type your text in and place it in the center like so:

Step 8: Warp the Text

The first step in styling this text is to warp it, which is just to say we will cause it to bend to both sides. Press (T) for your “type tool”, and select “create warped text”:

Then, select Arc Upper and bend 35%:

This is how it looks:

Step 9: Add an Inner Shadow and Stroke to the Text

There are really two parts to this step, which are the inner shadow and stroke effects.

For the first part, right click on your text layer, go to Blending Mode > Inner Shadow, and enter 100% for the capacity, distance 2 pixels, and size 8 pixels

Then, go to Inner Glow, select Linear Light for blend mode, capacity 100%, color #ffb741, size 7 pixels, and range 50%.

Next, go to stroke, use color #794e1d, size 15 pixels and capacity 100%.

Finally, the end result:

Designing the Cover of a Lingerie Menu

Cubert — Sat, 29 May 2010 07:36:10 +0000

We’re now well into spring with summer on the way, and nothing represents warm summer beauty better than dark black leather bras and panties. Today’s tutorial teaches the effects we used on our Flower Blossom Lingerie Menu, including the use of water color brushes, creating the look of movement in color, applying tanner looking skin, using glow to pop a figure out from a background, as well as a variety of other effects and brushes. However, our research indicates that 0% of our users will have read past the word “panties”, and will have immediately begun scrolling thereafter. Therefore, it will not matter what I write past this point, so I will simply post part of a poem written by Data on Next Gen: “Felus catus, is your taxonomic nomenclature, an endothermic quadruped, carnivorous by nature? Your visual, olfactory, and auditory senses contribute to your hunting skills and natural defenses.”

You can download the Flower Blossom Menu Template with full PSD and AI source in BoxedArt’s members section, as well as thousands of other website templates and web design products. Get a membership here.

Step 1: Start a Document and Insert a Photo

First, let’s get a photo of a model in lingerie. Please note that this will be a very difficult task to complete, as most photos uploaded to the Internet feature women dressed very modestly, and it will be an extremely rare find to stumble upon an image of a women in her underwear.

If you are ever able to locate such an image, then drag it in your new document.

Step 2: Create Some Watercolor Splashes

Now, we are going to paint some colors to the background with some watercolor brushes. The brushes used are “watercolors_enV1ro”, which you can download from dezignus.com. Create a new layer for each splash underneath the model layer. Then, select your favorite color; you can have as many colors as you like. This is how our splashes have been applied to the background of the design:

Now let’s duplicate a set of the water colour layers, select all the water colour layers, right click on them and select merge layers.

Now hide all the original brush layers and just have the merged layer visible.

Step 3: Give the Girl a Twirl

Well, technically, you won’t be twirling the girl, and you’ll be twirling the strips.. I mean the stripes. Go to Filter > Distort > Twirl and use 350 for the angle settings

Here are the results:

Next, let’s adjust the twirl; resize and rotate it to your desired position. Press Control T and play around with it (the SWIRLS!)

You can duplicate the twirl and move around anywhere you prefer. This is how our twirls are positioned:

Step 4: Add Some Motion to the Twirls

Next, we are going to add some motion to the twirls.. This is a very simple step, just duplicate a copy of the twirl layer, then go to Filter > Blur > Radial Blur and use 35 for the zoom amount.

This is how it looks now:

Step 5: Give the Model a Little Tan

Contrast is often a good thing, such as creamy white skin against black leather lingerie, however, our model is posing for a summer themed menu design, so let’s make her look more appropriate for the theme and give her a little tan; go to Image > Adjustments > Photo Filter

Pick the warming filter (81) and 50% for the density:

The results are a warm summer glow:

Step 6: Make the Model Stand Our from the Background

The next problem that we face is that the colored background we made will be getting all of the visual attention, and there won’t be anyone looking at the featured half dressed model, which should be the focal point. Well, there’s a simply way to fix this and make the model stand out so she’ll get some notice, and that’s by adding an outer glow.

Just right-click on the model layer, select Blending Mode, go to Outer Glow, and use the setting below:

This will create a clean white glow around the model photo as seen below:

Step 7: Add some Flowers to the Image

Next, let’s add some flowers to the image for a fresh summer feel. Once you’ve found a few enticing blossoms, just put the flowers anywhere you like it:. Here’s how we’ve sprinkled ours around:

Step 8: Oh My Stars and Garters!

Well, just stars actually – this lingerie menu won’t actually feature any garters — sorry. To add the stars to the image, go to brush (B), pick the star brush, and set the master diameter to 100 pixels.

Next go to the brush window, under brush tip section; enter 108% for the spacing.

Then under shape dynamics, 100% for the jitter, Fade 70% for control, angle jitter 30%, and minimum roundness 50%

Next, under scattering enter 269% for scattering and count jitter 7%.

Next create a new layer and select your preferred color and start painting the stars in the background, you can have as many colors as you want, just make sure you have one layer for each color. You can play with the brush diameter for different sizes of the stars. This is how our palcement looks:

Step 9: Twinkle, Twinkle, Little Star

Now, let’s add some glow to the stars. Right click on the star layers, go to Blending Options, and under Outer Glow use the settings below:

Do the same for all your star layers. Here are the results of the final image:

Finally, we have the results of the full menu; we’ve simply repeated the same steps above for the remaining 3 collages:

Design a Grungy Door Hanger Template for a Dirty Job

Cubert — Wed, 12 May 2010 04:19:06 +0000

Today we have a tutorial that Mike Rowe would be proud of; a dirty and soiled door hanger template for the tire industry. It may come as no surprise that getting filthy on the Internet is easy to do, however we’re going to show how do it using rubbers. Why does nothing I type come out right? Before I continue to make things worse as usual, we’ll just move along to the tutorial.

You can download the Fully Inflated Door Hanger Template with full PSD and AI source in BoxedArt’s members section, as well as thousands of other website templates and web design products. Get a membership here.

Step 1: Create a New Document with a Simple Gradient

The door hanger template design requires a pretty odd canvas size, specifically, 5.5 x 13.75 inches, which strangely enough is only an average size on the Internet — my god, I am so sorry. Now we are going to fill it with a gray gradient. Go to Gradient (G) in your toolbar and select Reflected Gradient.

Then, in the gradient editor box, fill in #e1e1e1 for the foreground color, and #8d9192 for the background color.

Next, drag your gradient from the middle of the canvas to the bottom of the canvas, and you should see the below result:

Step 2: Insert a Grungy Paper and Augment it’s Style

Now we need to find a grungy paper image for the background, which are available at most stock photo websites. This is what we’ve choosen.

Drag it into your canvas, and click Control T for free transform to fit it in your canvas. Then go to Image > Adjustments > Black & White

Enter 80% in the yellows field

Then, select Hard Light on the layer blending mode

This is how it looks now:

Step 3: Insert a Tire Image with a Few Effects

This design wouldn’t be much of a tire theme if we didn’t add a tire image, so that’s what we’re about to do now.

Make a selection of the tire by selecting the tire image layer and Control Click on the thumbnail image. Then go to Select > Modify > Feather

And enter 60pixels for the feather radius

Next, create a new layer underneath your tire image and fill it with black using the Paint Bucket Tool (G)

Then, create another new layer underneath the black layer you just created. Fill it with White using the Paint Bucket Tool (G)

Now, select both black and white layers, right click on them and select Merge Layers.

Then, go to Filter > Pixelate > Color Halftone, and enter 20 pixels for all fields

Then, on select multiply on the blending mode

This is how your image looks now:

Step 4: Add Streaky, Rusty, and Dirty Colors

Now, let’s add some colors to our image. Create a new layer, go to Gradient (G), pick color #b56612, and drag your point from the top of the canvas to the middle to create a gradient like what’s shown below:

Then, go to Filter > Distort > Wave, select Square for the type of wave, wavelength: min 100, max 400, amplitude: min 5, max 500, and scale 100% for both horizontal and vertical.

Then, select Overlay for your blending mode.

This is how your image looks now:

Step 5: Add and Format Your Text Message

Now, let’s add our text in; we’re using Desperado Font which you can download from dafont.com. Type in your text and place it on top of the canvas.

Now, let’s a final touch to the text; go to the text layer, right click on it and select Blending Options. Then, go to Stroke and enter 7px for the size, blend mode darken, capacity 100% and color #eb871c.

This is how the final image looks.

Here’s the final result with a few added touches and cut-outs made for hanging the design on a door handle:

Design a Fresh Floral Logo in Time for Spring

Cubert — Mon, 10 May 2010 23:04:04 +0000

Now that Mother’s Day has come and gone, you might think that flowers would be so yesterday, however with our leap into spring, there’s still plenty of time left to enjoy a bright colored bouquet. So, in the spirit of the season, today’s Photoshop tutorial takes us though the steps of arranging an attractive floral logo design, which we ourselves used in the Bright Day Bouquet Brochure Template. By the way, did you know you could make wine from elderberry flowers? Yep, you can get drunk off pretty much anything that grows in nature.

You can download the Bright Day Bouquet Brochure Template with full PSD and AI source in BoxedArt’s members section, as well as thousands of other website templates and web design products. Get a membership here.

Step 1: Create a New Document with a Multi-Colored Gradient Background

Let’s start with creating a new document with the size of 17×11 inches (the largest of the 3 brochure template sizes). Now, fill it with a gradient, use #e93e8b for your foreground color, and #fdd537 for your background color. Then, select Gradient Tool (G) and drag from the middle of the page to the bottom right diagonally to achieve the effect below:

Step 2: Add Your Basic Text

This logo is going to appear on the lower right on our corner, so we will only use a small part of the canvas that we set up in step 1. So, let’s insert your text in now; we’re using Hursleys font face, downloaded from dafont.com, and a clean and simple white font color.

Step 3: Create a Blurred Outline Effect Around the Text

Right click on your text layer, and select Duplicate Layer to make a duplicate copy. Then drag the duplicate layer underneath the original layer, go to Filter > Pixelate > Fragment. Then click Control F to apply the same effect again.

Step 4: Add Patches of Grass to the Logo

We have a basic logo set up, and to give it a nature feel, we’re going to add some grass effects. Create a new layer on top of all the layers, go to Brush (B) and select the one shown below:

Then go to Brushes Window, enter 25% for Spacing

And under shape dynamics, enter size jitter 100% and 8% for angle jitter

Then under Scattering, enter 3% for Count

Next, use #c2ee13 and slightly paint some grass on the text like what shown below:

Now let’s use a darker tone of green to give some depth to the grass, create a new layer, use #94b804 and change the brush pixel to 92, then paint some darker grass over the ones now:

Step 5: Adding in Leaves & Flowers

Now, let’s add some leaves to our text. We’re going to be picking out some clean looking leaf photos, and then dragging the images and placing them underneath the text layers.

We will do the same using photos of fresh flowers. Place these images next to the the grass like how we did:

Now, let’s add more flowers using varied colors and sizes:

Step 6: Using Floral Brushes for Decorative Touches

We are almost done here, and we only need to add some final touches. First, download some floral brushes to decorate the design; go to dezignus.com and download soulfulflowers2 brushes. You can try different brushes here, and with different colors. Just place it underneath your text layer.

Then, right click on the brush layer and select Blending Options, go to Outer Glow and change the capacity to 100% and size to 8%.

This is how it looks now:

Now our fresh spring logo has been completed.

Here are the logo’s results after placement in the brochure:

Add Simple, Yet Elegant, Effects for a Cool Looking Fashion Postcard

Cubert — Mon, 10 May 2010 01:14:42 +0000

The Internet is full of big flashy effects, immense graphical work, pictures of cats, and images of women under-dressed for any occasion. In today’s lesson, however, we will take a look at the flip-side of things, and discover how a few simple, tasteful, effects can not only complete, but comprise an entire design. It’s a reminder that sometimes simple works, and you don’t need to go overboard to achieve an effective design.

You can download the Purse Card post card template with full PSD and AI source in BoxedArt’s members section, as well as thousands of other website templates and web design products. Get a membership here.

Step 1: Create a New Document with Appropriate Fill Gradient

Start by creating a new document with the size of 8.5 x 5.5 inches (these are the dimensions of our post card). Next let’s fill the foreground color with #dedddb and background color with #6c6c6e. We are now going to fill the background with a gradient. Go to Gradient (G) and drag diagonally from the middle to bottom right of the canvas.

Step 2: Lets Hear Some Noise

Now let’s duplicate the background layer by right clicking on it and select duplicate layer. Then on the duplicate layer, go to Filter > Add Noise, and enter 100%.

Then select Linear Burn on the Layer Mode, and this is how it looks now:

Step 3: Add an Illuminating Handbag

Now, let’s add in a stylish image of your choice, in this case it’s a handbag. Just cut it from the background and position it in the middle.

Then, right click on the handbag layer, go to Blending Options and select Outer flow to add some glow to it. In Blend Mod, select Hard Light, capacity 100%, Noise 49%, Technique Softer, Spread 17%, Size 128px, and change the contour to the one shown below:

Step 4: Create an Elegant Line Design

Now let’s add some light effects around the handbag. Use your pen tool (P) to create a wavy line in front of the handbag.

Next, create a new layer and select Brush (B) with 13pixels and right click on the path layer and select stroke path.

Now, right click on the stroke layer and select Blending Options, and select Outer Glow, enter Hard Light for the Blend Mode, capacity 100%, and size 25pixel.

Step 5: Duplicate the Results

Finally, create more of the lines with different sizes and colors. You can apply the same effect on each stroke layers by copying the original layer (right click on it and select copy layer style), and pasting it on the new layers (right click on it and select paste layer style).

There you go, our elegant handbag post card. Hope you enjoyed the tutorial.

Create a Rockin Photo Frame and Collage

Cubert — Sun, 18 Apr 2010 07:05:27 +0000

In the world of photography, you will often hear the term framing relating to the positing of the subject matter of an image. In today’s lesson, we take things more literally and create a graphical frame around the musician of our Tight Music website template to draw attention and emphasis so that we highlight the photo’s beauty and style. It also just looks really cool.

You can download the Tight Music Template with full PSD source files and sliced table free HTML pages for this template in BoxedArt’s members section, as well as thousands of other website templates and web design products. Get a membership here or take a quick tour.

Step 1: Set Up Your Document

Firstly, create a new document, with the size of 1000px X 800px.

At the same time, gather some photos of your favorite musician. We’ve prepared 3 different angle photos of our artist.

Step 2: Trace Your Photo’s Supple Curves

We need to path out the artist from the background. I’m sure you know how to it by now. Just use the pen tool and path follow the model, and then copy it out and place it in your new document.

Step 3: Get Some Decorative Imagery

Okay, here we need to add some of the musical elements, like music notes, and some shapes to give a retro look, as well as some flowers. We developed ours in Illustrator (you can see the images in the last step), but you can just download some clipart or vectors to suit.

Step 4: Draw a Basic Box for Your Frame

Now, let’s create the basic block of our much talked about frame for the artist. However, before drawing it out, hide the layers with the artist to concentrate drawing on the frame first. Grab the rounded rectangle tool, use a radius of 50px, and draw a rounded corner box like below.

Step 5: Set Your Frame Width

Since we’re making a frame and not a solid block, we need to extract the center part of our rounded rectangle. To accomplish this, hold on to your CTRL key and click on the layer that has the rounded corner box. Next, under Select > Modify > Contract, set the pixel to 20 and press okay.

Step 6: Delete the Middle of the Block

Now, you can see the selection is smaller than the rounded rectangle. To remove the excess area, hit the delete button. The basic frame is now in place, but we still need to add in some effects and patterns to make it more enticing.

Step 7: Decorate Your Frame

Let’s add some patterns on the frame; I think a pretty cloud effect will suit our model selection – we downloaded this brush effect from Deviant.com. Before that, remember to lock the transparent pixels option.

Here is what was used to get the effect below.

Step 8: Add Dimension to Your Frame

Next, we need to add in some layer effect on the frame for the final touch up. Using some Bevel and Emboss effect will make the frame look a little more 3D. You can find the settings used below.

Step 9: Smooth as Satin

Before applying the above to the layer, there’s still another effect we need to add in, which is the Satin effect. This will give the frame a smooth and sharp sheen. Again the setting as below.

Step 10: Let in Your Musician

Finally, we have the frame finished. Now, start making the header with the artist images that we pathed out earlier. First, we have the blue frame, and here we used the first pose of the artist image. Put her in the frame just like below.

Step 11: Add in Your Vectors

Now, let’s add in some vectors to fill up the space. We added some nice flowers at the left corner, and as for the background, we drew a simple path.

Step 12: Create Additional Frames

Now that we have one frame done, let’s do two more with different colors and different poses of our artist. We created two different size, one in orange and one in green, and put them side by side the main frame.

Step 13: Finishing Touches

Now frame is ready, and again, it’s time to fill it up. We’ll use the different poses and different vectors that we selected earlier. Doesn’t it look cool?

After you have finished this, you can start composing your menu, sidebars and content for you page. Enjoy!