Here are some examples of images generated using the new "Skyzu" Style Buttons. There are thousands (maybe even millions, I was never good at statistics) of combinations of colors, fonts, borders, shine and shadow options that you can choose from, so use your imagination and have fun!

These smashups were inspired by a button set that I found over at the Open Clip Art Library. The Open Clip Art Library is an amazing resource for open source images for web design. Thanks very much to Chris Design for creating the look. I took his button set, parameterized them and created these 5 smashups.

Click on any of the buttons above to create your own button images.

The bad news? There aren't any new smashups this month. The Good news? It's much easier to manage your smashups with the new interface! Anyone can preview, open, download, and copy the code of any smashups they create. Registered users can also re-create, and save their smashups with a memorable name.

*Coming soon: Registered users will be able to share their smashups. They'll be able to choose which fields to make accessible as well as whether they want others to be able to see and/or edit their smashups. The share check box is present but currently doesn't do anything.

• To Change the color, text or some other property of the Smashup, click "Edit", then change the values and click "Re-create".
• To Save the smashup so that it stays on the server, click "Save & Share", check the box labeled "Save?" and click "Submit".
• Every time a new smashup is created, it is given an automatically generated name, such as "9871". If you'd like to save it as something more memorable, click "Save & Share" and change the "Name" text box to whatever you'd like. In the example above, I renamed the smashup to "Subtitle for Your Smashup Page".
• Clicking Delete will completely destroy the smashup and all files associated with it.
• Click "Preview" to see a snapshot of what the smashup looks like. Some of the css or javascript might not work 100% in this view, so click "Open" to view in a new window and get the full effect.
• "Download" will create a zip containing all images, css and javascript files needed to reproduce the smashup
• "Get Code" shows the html, javascript and css source code for the smashup. If you save the smashup, you can copy and paste this code to display the smashup on your site.

Please Contact me if you run into any problems. Have fun!

The Square RSS Feed button has been so popular, I create a round edition as well over the weekend. This button is loaded with options. Choose whether or not to have a shine effect, drop shadow, border, and/or reflection. Choose how much "Shading" is applied in addition to whether you want the rss symbol to have rounded ends.

Here are some examples, try it out for yourself, Enjoy!

I stumbed upon a site the other day that generates Web 2.0 Company names and thought it would be pretty funny to create some "Web 2.0-ish" Logos to go along with some of the names it suggested.

These are all "made-up" company names (as far as I know). I created each of these Logos using the Web 2.0 Logo Smashup Image Generator. Feel free to try it out for yourself.

The first name I generated using the Web 2.0 company name generator was "GigaCat"...hmmm sounds like a construction software development company, maybe? Anyway, here's my first attempt at using the Web 2.0 logo generator, notice the reflection stands out a lot.

I toned down the reflection by changing the Reflection Opacity from 100 to 60, and Cut the height of the reflection by changing the amount that the reflection fades away from 1 to 0.6 100 to 60:

"FlashFish" almost sounds like a real web photo company! Notice how the reflection is too far below the text in this logo?

I changed the "Reflection Axis" to 0.85 85 to move the reflection closer. I think this looks better:

Here are some other examples (Just having fun...)

Try it for yourself. Have fun!

Now you can use smashupgraphics.com to create your own awareness ribbon. You can choose any color and optionally add any message you want to describe the cause you want your ribbon to show support for. Take a look at this Wikipedia article for a list of different colored ribbons and a description of what each color represents. Then check out the Awareness Ribbon Logo Creator Smashup to create your own, customized ribbon right now for free!

Here are some examples of what kinds of ribbons can be created:

The Problem:

You have a heading or subtitle and would like to display a fancy image rather than boring text. But you would like to keep the text in your page so that search engines and screen readers can still figure out what your article is about.

The Solution:

This article describes how to use css to replace text with an image. This technique was first introduced as the "Fahrner Image Replacement" (FIR). The FIR method has some limitations, so I will demonstrate how to use an adaptation of the FIR method that was written by Douglas Livingstone. Read more about this technique here.

Step 1:

Write the html markup for the heading or subtitle text you'd like to replace. For example, the first paragraph of this article begins with the words "The Problem". Here's the html markup:

<h1 class="subtitle" id="theproblem"><span></span>The Problem</h1>

Step 2:

Use a smashup to generate a image to use to replace the text. For example, I used the "Simple Text" smashup tool to generate the following image:

Step 3:

Include the following css rules once to your page so that text inside h1 tags will be hidden behind images.

h1 span {
display: block;
position: relative;
z-index: 1;
}

/* IE5 Mac Hack \*/
h1 { overflow: hidden; }
/*/
h1 { text-indent: -100em; }
/* End Hack */


Step 4:

Add the following css once for each heading you want to replace. Change the url to match the image you want to use. Change the width, and height to match the image's width and height. And change the margin-bottom to match the negative of the image's height. For example, this code snippet shows how I replaced "The Problem" with the image shown above:

#theproblem, #theproblem span {
width: 300px;
height: 75px;
background-image: url(http://www.smashupgraphics.com/files/smashups/p/1360/smashup_custom_text.gif);
background-repeat: no-repeat;
}

#theproblem span { margin-bottom: -75px; }


Now go generate some text images and change those boring headings!

Here are some examples of images I created using the comic book effect.

Font Type: Acidic
Gradient: Full Saturation Spectrum CCW
Outline Color: #ffffff
Outline Size: 1

Font Type: African
Gradient: Burning Transparency
Outline Color: #d15c5c
Outline Size: 5

Font Type: AllStar
Gradient: French Flag Smooth
Outline Color: #ffffff
Outline Size: 2

Font Type: Barbeque
Gradient: Incandescent
Outline Color: #ffffff
Outline Size: 2

Font Type: Big Lou
Gradient: Radial Eyeball Blue
Outline Color: #ffffff
Outline Size: 1

Font Type: Billo Dream
Gradient: Fare Glow Radial 1
Outline Color: #d11ef1
Outline Size: 3

Font Type: Blood Of Dracula
Gradient: Burning Transparency
Outline Color: #fbe2b7
Outline Size: 2

Font Type: BoobTube Open
Gradient: Brushed Aluminum
Outline Color: #ffffff
Outline Size: 1

Here's a new smashup that generates a RSS feed icon. Choose the color scheme, size, and whether you want a drop shadow and glassy effect. This is the standard web icon used on websites and blogs to show users how to subscribe to receive the latest content. RSS feeds make it easy to stay up to date on the latest stories and articles from your favorite blog or website. Read more about what RSS feeds are and how to use them here.

Feel free to use any of the feed icons that you generate here on your website or blog so that users know how to subscribe. Here's an earlier post about how to use smashups on your own website. How To Use These Graphics On Your Website

Try it out. Simply click "Create" to make a new RSS feed image that looks like this:

If you need a smaller button, just decrease the size. For example, here's what the icon looks like with size=60:

Change the Background color to match your website's background color. You can also change the color of the icon by changing the "RSS Button Color". The color of the circle and stripes inside the icon can be changed by editing the "Inside Color" field. For example, here's a blue button, with black background and red inside color:

Finally, you can disable the shadow and the glossy effect by unchecking the two check boxes. This makes the icon look "flatter":

A "flat" version (without the drop shadow and gloss) is useful for smaller sizes, for example, size=20:

Have Fun!

Here are some suggestions and examples of how to use the Simple Custom Text Smashup to create some cool looking logos.

The Simple Custom Text Smashup Graphic Generator can be found by clicking the "Browse" link at the top of the page, or by expanding the Menu labeled "Text Effects" on the left navigation menu labeled "Smashups" and then choosing "Simple Text". Below I explain each of the fields available for customizing this smashup as well as some tips on how to get the best results.

If you just want to accept the default values, go ahead and click "Create". The page will refresh and inform you that the smashup is generating. Once it's finished, the image should display at the top of the screen and look something like this:

Now, for example, say you are writing an article about how to create flashy web pages and you want to use some cool images as subtitles. If the first section of your article is about how to choose a color scheme, you might want a subtitle that says "Color Palettes, Choose Wisely". So, go ahead and type that into the field labeled "Text". Click "Create" to see how it looks:

Wow! That's too big for a subtitle, so change the font size down to 25. That's better:

So, this simple black text on white background image is pretty boring, especially since this is going to be for an article on color! So, how about a dark purple for the "Text Color" (#8b3c87) and change the background color to match the background of your website. In this case, I'll leave the background as white (#ffffff). Web site colors are entered in "hexidecimal" format. If you don't know what that means, don't worry about it. You can use the color selector to visually choose the color and the hexidecimal value will automatically be entered into the field for you. If you'd like to learn more about how html colors work in web pages check out Wikipedia's description on html colors.

If you like the font, then your done! You can download the graphic and use it on your web site for free! But since this is a graphic for an article about colors, lets change the font to "PaintDrips", get it? Since it's an article about colors, we're using "paintdrips" - oh aren't we clever!

And there you have it! Most of the other smashups under the "Text Menu" work the same way, but offer more fields to add some more cool effects for your logos. Enjoy!

After you've generated a new smashup and your happy with the way it looks, download the smashup as a zip file by clicking the link labeled "Click here to download a zip archive of all the files". You will then be prompted to either save or open the file.

Choose "save" to store the zip file to a memorable location on your computer.

The zip file contains all the files needed to use the smashup on your website. Extract the files from the zip using your favorite compression software. I prefer to use 7-zip because it's open source and works on variety of operating systems. WinZip will work as well.

After the files are extracted, you can preview the smashup on your computer by double clicking on "index.html". This will open a new browser window and display the smashup just like it looked on this site.

For simple text and logo smashups, all you will probably need is the image file. For more complicated smashups like the example below, you'll may need to edit some of the html, css and javscript to integrate into your existing web pages.

Finally, upload the files to your site using your favorite ftp client software. I like the open source ftp client named Filezilla.

Note: Smashups will only be available for download for a limited time. This is necessary to save space for other smashups to be generated. When a smashup expires, the page will display "This smashup has been removed to clear space. Please regenerate and then download."

Here's an example of how to use a Rounded Corner Outline with Titlebar smashup on your own website.

First, generate the smashup. My site has a white background, and I want blue title bars, so I used the following values:
Height: 25
Top Corner Radius: 2 (I want my top corners to be square)
Bottom Corner Radius: 4 (I want my bottom corners to be square, I had to play around with this value to get it how I liked)
Background Color:#ffffff
Titlebar Color:#245397
Border Thickness: 2
Border Color:#245397

Here's a screen shot of the preview:

Next, download the zip file by clicking the link labeled "Click Here to download a zip". Remember to choose "save" when prompted:

Next, extract the files from the zip. In this example, this will create an "index.html" file, a "smashup.css" file (which is referenced inside index.html) and a few image files. Different smashups will create different files. For example, most text smashups create just 2 files: index.html, and one image file.

The final step is to copy the html from index.html into your existing html web pages and Edit the text as needed. For example, to create the menu below, I copied everything inside the body tag of index.html and pasted it in this page. I changed the "smashup-header" div to display "My Menu" and I added a unordered list of links inside the "smashup-body" div with two links: Welcome and Contact. Then I copied the css out of smashup.css and added it as an inline css stylesheet so that the divs are styled and the background images work.