FP Cleaner Utility Tool has been created by MVP Steve Easton. It has been updated to work with Expression Web 4 (along with the earlier versions). You can download it here.

The FP Cleaner is very helpful in cleaning up the temporary files and any issues that may occur while using Expression Web. FP Cleaner does not require any installation and can be run from desktop. The interface looks like this:

Roll over each option to know more about it. Lets take a look at the interface;

a. Restore Default Toolbars and Menus – This option is not available in Expression Web 4 since the feature of customizing toolbars is no longer available in Expression Web 4. However you can use this option in the earlier versions of EW.

b. Change the “Open Last Web” Setting – This options lets you change the Open Last Web setting, if you have set EW 4 to open up the last edited web when the program starts. In case the web has any problems, it can cause the program to open and freeze. So this way you can make sure the last edited web is not opened.

c. Clear  the Hidden “Temporary” Files – The option first checks for existence of any Temporary directory for the logged on User and if it exists, clears the directory by sending the files to the Recycle bin.

d. Clear the Hidden Cache (*.web) Files – There is web cache file (*.web) for each web and for each web location you create. If these files corrupt then you could face problem opening or closing or publishing your web site. This option deletes these files and forces creation of new clean files when each web is opened or published.

d. Clear the Find Replace MRU List – clears the Most Recently Used ( MRU ) list of Find/Replace entries that are saved the system Registry every time you use Find/Replace to replace words or HTML items using Expression Web.

e. Start – Will launch Expression Web 4.

f. Close – Closes the FP Cleaner program without running it.

g. Info – Displays the basic information about the program (as seen in the above image).

h. Properties – opens the Windows file properties dialog for EWFPCleaner.exe.

You can download the FP Cleaner for Expression Web 4 for free.

I have come across many clients who want a Web 2.0 style buttons, icons and logos. Though I haven’t found any specific features in a Web 2.0 button or logo but the objects are usually elegant, clean, with lots of gradients, shiny and they stand out. In this tutorial we are creating a Web 2.0 button (if it falls in that category) or should I say a glossy button like this:

1. Draw an Ellipse. Hold down SHIFT as you draw to create a perfect circle.

2. Fill it with a gradient of your choice. I have used a gradient of green.

3. Copy this ellipse and ‘Paste in Front’ (Edit > Paste in Front or CTRL + F) of the earlier ellipse. Then with the new ellipse selected, hold down SHIFT + ALT + drag the corners to shrink it a bit. See image below:

4. Then apply the same gradient to it from the Gradients panel. And reverse the gradient using the ‘Reverse Gradient’ button . The ellipses will now look like:

5. Now we will draw an ellipse that is smaller than the second one. To do that, choose the Ellipse Tool, hold down SHIFT (to draw a perfect round) and ALT (to begin drawing from the center) and draw an ellipse as shown below. Fill this third ellipse with a simple gradient using the same shades of green you used earlier. This way the colors will blend well into each other. I have used a Radial Gradient. But you can always experiment with colors and gradients.

6. Next draw another perfect circle from the center (by holding down SHIFT and ALT while drawing). This is the forth ellipse.

7. To add a nice effect, we want a variation of elongated circle out of the forth ellipse. So choose the Pen Tool , hold down the cursor to open the fly out menu and choose ‘Delete Anchor Point Tool’.

8. Place the pen on the anchor point on the bottom of the ellipse and click to delete it. The result would be like this:

9. Fill it with a yellowish green shade (as shown below).

10. Draw a fifth (the last one) ellipse in the center of all the circles and fill it with a light shade of yellow.

11. Then select the forth and the fifth ellipse, go to Object > Blend > Make. Your button is ready and this is how it will look:

NOTE: While we are using the Blend feature to achieve this effect. You can also achieve a similar effect by adding a radial gradient to the fourth ellipse. But I somehow like to use Blend to get this effect.

12. To add a mirror effect we will create an Opacity Mask. First we will replicate the entire button and flip it below the button. Select the entire button using the Selection tool. Right click and choose Transform > Reflect… In the Reflect dialog box, switch on the Preview, choose Horizontal and click on Copy. Now move this copy to the bottom of the original button. Holding down SHIFT while moving will help you maintain the vertical axis.

13. Draw a rectangle above the mirrored copy and fill it with a gradient of grey-black.

Adjust the sliders to get the desired effect.

14. Now select the rectangle and the mirrored image (placed below the rectangle) using the Selection tool. Open the Transparency Panel. If not visible go to Window > Transparency. Click on the double arrows on the top of the panel and from the menu choose ‘Make Opacity Mask’.

15. If you are not satisfied with the result, then open out the Transparency panel, and edit the Opacity Mask.

NOTE: When you click on the Opacity Mask thumbnail, only the mask becomes editable and all other objects on the art board are locked. To get out of this mode, click on the first thumbnail that shows the original image.

What is an Expression Web Community Toolbar?

The Expression Web Community Toolbar is a tool which makes it very easy to access all important Expression Web related links and resources. This toolbar is created by fellow MVPs Tina Clarke and Pat Geary and is free for download.

The toolbar includes all of the  Expression Web versions 1, 2, 3 and 4 as well as these Expression applications;

- Expression Design
- Expression Blend
- Expression Encoder

The toolbar has different categories in which chosen Expression Web sites (sites that provide you with quality information about Expression Web) are grouped and organized into:

- Expression Web links
- Expression Web Blogs
- Expression Web Tweets
- Web Design Links

Each of these sections will expand to show sub-categories and links within them.

What is included in the Expression Web Community Toolbar?

Expression Web Links:

Expression Web Blogs:

Expression Web Tweets:

Tweets from the Twitter id expressionweb where 3rd party links to tutorials are posted and you might find them helpful.

Web Design Resource Links:

help you with Web Design in general.

It also includes links for  Contests, Giveaways and special offers for Expression Web 3.0 and 4.0. If you want to know what Expression Web Communities, Webcasts and Live Events might be available? Those are included too.

NOTE: A ticker will display latest breaking news or special offers.

There are some additional options on the toolbar which will allow you to add other applications to the toolbar. Click on the black arrow next to Expression Web and choose ‘Toolbar options’. Then choose ‘Useful Components’ tab. Check the applications you’d like to show on toolbar and click OK.

How will the toolbar benefit me?

What do you do when you need information or tutorials about Expression Web? You either search them on various search engines or scan your bookmarks for any sites you visited earlier and have bookmarked them. What if you have not bookmarked them? Then you will have to spend good amount of time in searching for the resources. Here the toolbar would come to your rescue.

What could be more convenient than having everything in one place so everyone can freely access latest news, articles and tutorials. The Expression Web Community toolbar is updated regularly with the latest tutorials, links, news, updates. Look for “NEW LINKS – LOOK HERE FIRST” with a date for the newest offerings.

How do I download and install this toolbar?

You can download the toolbar over here.

Then run the executable file, follow the wizard and the toolbar would get installed on your default browser (that’s what it did on my Windows 7 machine).

Can I also add a resource to the toolbar?

Of course you can. Read more about the Expression Web Community Toolbar.

In this article, I would like to present 10 grayscale icon sets that I have collected from different sources. These are FREE Icon sets, so you can go ahead and download them and use them wherever you may like. But do read the license document if any (may ask attribution), since they are subject to change.

Icons for iPhone and iPad Apps from Glyphish

These icons are designed and optimized for use on toolbars and tab bars in iPhone & iPad apps, they’re also perfect for Android apps, websites, t-shirts, tattoos and more. The set contains 130 png icons.

Free Wireframe Toolbar Icons for GUI designers

This is a latest version of the Gentleface Toolbar Icon Set made for interface (GUI) designer. These icons can be used for wireframes and software mockups creation, websites and software applications toolbars and menus including iPhone and iPod apps. You’ll find a set of 8 cursors and 236 icons in black and white color versions. The icons include pagination arrows, ratings and voting controls, social interaction symbols file system and text editor actions.

The entire set totals 244 original icons optimized for 16×16 pixel size and available in 16×16, 32×32 and 48×48 pixel sizes.

The Creative Commons Attribution-NonCommercial is FREE and the Royalty Free license is for $29.99. Read the license document carefully before use.

Reflections Icons by Webdesigner Depot

The set contains 208 icons and is available free of charge for personal and commercial projects, with attribution required.

Iconic by P.J. Onori

The icon set package contains all icons in PNG, SVG, SWC and Omnigraffle stencil formats in dimensions of 8×8, 12×12, 16×16, 24×24 & 32×32 pixels.

Mono by Jason Cho

A set of 108 simple icons. The icons are available in 32×32 px, png (transparent background) format.

Media icons by Subrat Nayak

White and Black Media Icons contain 15 icons in PNG[128x128], Icon for Windows(Vista Comptible) and Mac.

Token by brsev

Token is a set of 70+ shape icons, with simple style yet very useful.

iphone toolbar icons by The working group

A set of 160 icons available for free download.

Android Icons by Android icons

The package includes 30 PNG menu icons and source files for any customization.

Web Standard by Templay

28 icons for web designers and bloggers.

These logos are suitable for organizations who work in the field of Life Sciences.

Contact us at saffronstroke@gmail.com for Vector files of these logos.

Some time back I came across a question in the Expression Web Forum, that when an empty <div> is dragged from the toolbox and dropped onto a page in the Design view, the div is invisible. Some of you may have come across this too. Now there isn’t any rocket science behind this. Its just that the visibility options need to be configured.

In the above screenshot, notice the Design view doesn’t display the body or the <div> tags. Both these tags are empty. As soon as you enter some text in the body, the body is visible (depicted by the dotted border).

But the <div> tag is still not visible. That’s because, it is still empty. What if we need to make all the empty tags visible, always.

Go to View > Visual Aids > Choose Empty Containers. Now all the empty tags will be visible.

An additional tip is to also switch on the ‘Margins and Padding’.

Now there are two ways you can get gradient text. One method is to create a gradient, add it to Swatches Panel and then use it to colorize your text. The other method is to create outlines out of text and then use the Gradient tool to use the gradient on the text. Each method has its pros and cons. While the in the first method the text is always editable, you have no control over the gradient after it is applied. On the other hand in the second method, once you create outlines the text becomes un-editable, but you can modify the gradient as you wish.

In this tutorial, I will explain both the methods and you can choose whichever suits you best.

Method I

1. Create a new document/ open an existing one in Adobe Illustrator CS5. Choose the Type Tool (T), draw an area type box and type in some text.

2. Undock the Swatches Panel. If you cannot find the Swatches Panel, go to Window > Swatches.

3. Now using the Rectangle Tool (M), draw a rectangle that is of same size of the area type box or longer. The reason behind this is, the gradient will be repeated to fill the text. So longer the text, more repetitions. Since you won’t have any control over the gradient, once you add it to Swatches Panel and apply it to the text, you need to be careful while creating one. In case you want to modify the gradient later, you need to modify it in the Gradients Panel and then again add it to the Swatches Panel.

4. To create a gradient, open the Gradient Panel. If you cannot see the Gradient Panel, go to Window > Gradient. Create a gradient using two or more colors. This is what I created for this example.

5. Now select the rectangle and drag and drop it into the Swatches Panel.

6. Then select the text (using the Selection Tool (V)), make sure Fill is on foreground and click on the newly added pattern in the Swatches Panel. Your text will now be filled with the gradient.

Method II

1. Type some text in a Type box. Then with the Selection tool (V) selected, single click over the text to select and then right click. From the menu, choose Create Outlines.

2. Now select the built in gradients or create a new gradient. With the outlined text selected, single click in the small gradient preview in the Gradient Panel to apply.

3. Now if you want to change the direction of the gradient, you can do that. Choose the Gradient tool (G) in the Toolbox and drag into the direction to change the gradient stroke.

TIP: Once you create an outline from the text, you can ungroup the text and colorize them with gradient, individually.

To place text into your Illustrator documents, you can always open the source document, copy and paste the text into Illustrator. Another way to do this without taking the trouble of opening the source document, copying and pasting the text, is by importing the documents in Illustrator. You can import other documents like Microsoft Word document, Notepad or any Rich Text Format (.rtf) document.

1. Open/create an Illustrator document.

2. Draw an Area Type Tool (T). An area type tool is when you choose the Type Tool and draw an area to add text. As against Point Type Tool where you can click once on your art board and start typing.

3. Go to File > Place > Browse to the file > click Place.

4. The Text Import Options window will be prompted. Change the default settings if required, or click OK.

The text from the external document will now be placed inside the Text box.

This text is completely editable and you can modify it anyhow you want.

Icons make blogs and websites interesting and attractive. There are plenty of formal icon sets available, and we always tend to use them in our blogs. But wouldn’t it be a good idea to use icons that fit into the theme and subject of the blog or even make them look cool. In this article, I am sharing 10 free funky icon sets that I liked, which I collected from various online resources. Though this list is not exhaustive and I will keep posting more of these, I hope you like them.

NOTE: The icons listed here are available for free download as of the date of this post. However the license agreements are subject to change. Hence please read the License agreements carefully before use.

Free RSS Feed Icon Set

A set of animal cartoon RSS feed icons.

Mammoth Icons

A set of 4 mammoth icons by Fast Icon.

Cute Tweeters Icon Set

This icon set contain 8 cute twitter bird icons.

Dino Icons

A set of 6 freeware icons of cute dinosaurs and cavemen.

Birdie Adium Dock Icons

A set of cute green birdies for your desktop.

Ratatouille Icon Pack

A set of 15 icons in png format of size 512×512.

Yummy Icons

Yummy icons (by IconEden) are inspired by food and you can add a delicious touch to your blog. Absolutely ideal for a food blog.

E-shopping Icons

A pretty good collection of ecommerce/shopping icons for online shopping websites.

Pool Icons

The Alien Icon Set

A set of alien inspired icons for your blog or desktop.

Santa Claus Icons

Cute faces of Santa Claus in the form of icons.

No I haven’t made any spelling mistake neither are you making any mistake in reading the title. It is SlapShot and not Snapshot that I am talking about here. Some of you must have already used the Snapshot Panel, that was introduced in Expression Web 3. For them, the SlapShot panel would seem familiar. But for those who haven’t yet used the Snapshot panel, let me brief you about it first. Snapshot panel helps you get an instant preview of the page you are working in by displaying an image of the current page, as rendered by the selected browser. You can switch between the browsers and resolutions to instantly preview your changes in different browsers. Read more about the Snapshot Panel.

SlapShot is a new add-in or extension written for Expression Web 4 (created by John Dixon) that extends the features of Snapshot by including full ActiveX support (Silverlight®, Flash®, and so on), as well as interactivity within the page (including navigation).

Download the SlapShot add-in here. Then install it using the Manage Add-ins option in EW 4. To learn how to install add-ins, read Expression Web 4 Add-Ins.

Once the add-in is installed, go to Panels > SlapShot and the panel will be opened in your workspace. Dock it anywhere you want. When you launch SlapShot for the first time, it would look like this.

SlapShot works by listening to the Expression Web ondocumentchanged and ondocumentsaved events. When a page is saved or the active document is changed, the SlapShot displays the updates. There are a few conditions that must be met before SlapShot will work correctly:

• The page must belong to a site on the local computer.

• Expression Web must be configured to use the Microsoft Expression Development Server.

• Run any page once or load SnapShot  to start the Development Server for the site.

The first version of SlapShot includes default support for the version of Internet Explorer installed on your system. To know more about SlapShot read here.