Not wanting to take two years to select the handful of apps I would probably use, I went a different route. I e-mailed my tech-savvy friend, also an iPod Touch user, asking for his recommendations. An iTunes screen shot and a few minutes later, I had his recommendations.

There is an easier way. AppsFire, launched just today, offers iPod Touch and iPhone users an easy way to share and recommend apps. According to the introductory video, “AppsFire is a new iPhone service that will allow you to share your favorite iPhone apps with your friends.” The way it works is simple.

First, you must download AppsFire onto your computer. Right now, the program is only available for Mac users. After installing the program, AppsFire will immediately take inventory of all the apps that you have installed on your device.

From there, you go to your own personal AppsFire page—the page where you can both see your applications (on a virtual iPhone), chose the applications that you want to tell your friends about (or select all of your apps), and notify them.

To notify friends, there are four share buttons. The buttons are “social networks,” “e-mail,” “widget,” and “links.” The process is simple. E-mailing is a mere matter of titling your selection, inserting your friend’s e-mail address, and sending the e-mail—right from the AppsFire page. Social network shares are just as easy. Virtually all it takes is one click—and instantly a link to your favorite iPhone apps is available for all your friends and followers to check out on Twitter, Facebook, or Delicious. If a simple link to e-mail or share is what you prefer, that is also possible within mere clicks.

When you send the AppsFire notification to your friends, they will see the same image of an iPhone, loaded with all of your recommended apps. Remember, that you can control which apps your friends see. Thus, any proprietary apps that you own and would like to keep confidential, need not be included in your initial selection. Friends browsing your apps can click on any of the apps to bring up the download page in iTunes, and download it right to their own device. (No, they don’t get them for free, just because you “shared” them.)

The process and idea behind AppsFire is much like social networking customized for your iPhone. This will prove to be a simple, fast, and convenient way to get the apps you need, as long as your friends jump on board, too.

Since some piano player in New Jersey owns the domain MichaelGray.com I had a few options but the best was to go with my middle initial and byt the domain MichaelAGray.com. Since I’m all about wordpress as a CMS I put the files up, put up my theme of choice thesis, tweaked it with the thesis reputation skin, and installed the XML Sitemaps plugin. I set it up to ping all of the search engines as shown below:

Within 4 days the homepage for the domain was showing in Bing and Google as shown below (yahoo just didn’t love me enough)

I’m a big advocate of using sitemaps, and I think this demonstrates their effectiveness. Unless you have a really small site or really good site architecture, chances are some parts of your website aren’t as exposed, or well linked as others, and this helps you spoon feed the search engines your content insuring better crawling.

That’s not to say you should use sitemaps and not worry about spiders being able to crawl, because internal anchor text can play a huge role in SEO. However use on XML sitemaps as a redundant backup plan to help make sure you fully crawled and indexed.

Comments

Using the tool is as simple as expected, coming from Apple. Simply select your state, and the site automatically brings up a list of stores in your selected state, along with four columns representing the four varieties of iPhone 3GS: white 16GB, black 16GB, white 32GB, black 32GB. Color-coded for your convenience, the availability tool presents almost-real-time information on which stores have the iPhone 3GS in stock.

If its an older model you’re in search of, Apple informs you that the 8GB iPhone 3G is available in all stores. If it’s the newer 3GS you’re looking for, the new tool may be helpful.

Have you ever seen those little paper doll cut outs that come with different outfits with tabs you fold around them to dress them? Well, this is a Flash version of just that, minus the little unattractive tabs on all of the outfits. And, instead of a generic doll, we’re going to dress up Jessica Rabbit.

This tutorial is intended for you to learn how to make a Flash animation with small size, and just enough interactivity to keep people interested. This looks a lot more complicated than it actually is. There are only small bits of code for Actionscript that we’ll be using to make this whole animation work (which I will explain to you when we get there).

Step 1: Creating Jessica

So we start off with these pencil drawings, scanned in.

Now, we take it into Fireworks and outline her using the Pen Tool. This will take a little bit to trace all of the lines. Make the lines black, and 1px is fine. It will likely look a little choppy to you, but don’t mind that, it’ll smooth out here in a bit.

I have Jessica in two parts. Her body and her face. I wanted to be able to clearly see the detail on her face (even though it’s a simplified cartoon face). I traced the two separately, and then brought her traced face into the file with her traced body, matched them and connected the lines.

Step 2: Importing Jessica

When you save Fireworks files, without flattening them and making a bitmap out of them, you can import them directly into Flash, maintaining all of the layers, and the small size of the file. If it’s compressed you can not only not edit it when imported into Flash, but it creates an enormous file size that is completely avoidable with a few extra grains of effort.

Open Flash and go to File>Import to Library.

Maintain all of the defaults, or make it look like this:

Open your Library if it’s not already open CTRL+L or Window>Library. You should see a little folder in it that says Fireworks Objects. Open that, and inside of that you will see a new Symbol, which should be the Jessica Rabbit image from Fireworks.

Double-click on the image of Jessica and it will open that symbol on the stage.

Now, select all CTRL+A or use the arrow and select everything that way. Copy everything it has selected CTRL+C or Edit>Copy. Go to your menu and insert a new symbol. Insert>New Symbol or CTRL+F8. Name it Jessica, and make it a Movie Clip. Click out on the blank stage, then Paste everything you just copied. CTRL+V or Edit>Paste. While everything is still selected, go to your menu and ungroup Modify>Ungroup or CTRL+SHIFT+G so you just have a bunch of lines selected and not a bunch of grouped boxes. She is officially in as raw a format as we can get her in Flash.

***Don’t forget to save frequently during your projects. You never know when a program may crash and you’re going to be doing a lot of work here, so you don’t want to lose it all.

Step 3: Connecting with Jessica

We need to make sure all of the lines are closed off in Flash. If they are not closed off you cannot fill in the spaces. At this time you’ll also want to smooth out some lines as you go along.

To connect a line zoom in using the magnifying tool. Find a line that is not connected to another line, and hover your mouse pointer over the tip of the line. Your pointer will change into a corner looking icon, which indicates you found the end of the line.

Click and drag the line to the connecting point.

While you’re going through connecting these lines, take note of curves and straight lines you’re not really satisfied with (I would connect all of the lines first, then come back through). When you finish connecting all of the lines, go back and start smoothing them out.

You can either hover over the line and when you see a curved line icon appear click and drag the line to a more appropriate curve…

…or select the line (you may need to hold down the shift button and select the line in sections, depending on how it’s drawn) and use the little Smooth curves or Straighten curves button in the Tool box.

Step 4: Giving Jessica Life

To color Jessica I found a still image of her from the Who Framed Roger Rabbit, and pulled the colors from her on-screen illustration. Selecting the Paint Bucket Tool, you just click and fill in each section. If for some reason it does not fill in, there may be a line or two that have not been connected. Check all of the possible breaks in an area and close them off, which should make your fill work.

To make Jessica look less like a drawing, and with a little more life, we’re going to colorize her lines also, instead of just leaving them black.

Select something darker than the fill color, but not too drastically darker that it may as well be outlined in black still.

And so you continue this process with her whole body.

Now… we are going to give her a little more depth. Right now she looks very flat, because she is filled in with flat colors. We want to give her a little dimension by adding some gradient and some shadows.

Use your black arrow to select an area of color. Go to the Color Mixer and choose either a Linear or Radial (circular) gradient to use in the area. You’ll want to select the two (or more) colors you want to use. I only used two, as I don’t want to make this overly complicated, and it gives it just enough depth to give it some life.

To change the location of the gradient in the space you selected, as well as its size and shape, select the Fill Transform Tool.

Once the Fill Transform Tool is active, click the gradient shape in your image you want to alter. Once you click on it, a circular shape will appear.

Don’t forget to add some shadows too! The shadows really help the images pop.

I found the easiest way to add some shadows is to use the Pencil Tool or the Pen Tool. Select a bright color, or something you have not used for one of your lines already. Start drawing lines and filling in sections as you go along. When you fill a section in, double click on the bright line and it will select the whole line, even if it’s cropped by some other shapes, and hit the Delete key on the keyboard. We don’t need these lines after the shapes have been filled.

Continue these steps for the rest of the body, using colors accordingly. This will take a little while, and is full with trial and error to get just the right look you want.

First, duplicate your layer.

Next, you will want to cut out the main object. I used the magnetic lasso tool for the guy in my picture. You can use whichever tool is easiest for you.

Once you have the whole image press Control J to put it on a separate layer.

If you want, you can temporaily hide the other layers so you can just see your main image and fix anything you need to.

(I had to erase a little part of the background that I missed with the lasso tool)

Now we will add the effects. Right click your new layer and go to Blending Options.

First we will add a stroke. Here were my settings:

You should have something similar to this:

Now and outerglow. And again, here are my settings:

The only thing you probably cant tell is I slightly changed the color. I kept it a yellowish-whtie just like the default, I just picked a little bit of a whiter color. I wanted to leave some of the yellow tint.

Now here is what mine looks like:

Next, I am going to repeat those steps for the soccer ball. This time I just used the elliptical marquee tool to cut the ball out. I kept the glow the same and slightly changed the stroke:

He needed a little more intensity so I went to Image > Adjustments > Hue/Saturation: (I just changed the saturation number)

The results:

Next I clicked in my background layer, went to Filter > Blur > Gaussian Blur:

Your Blur number might be different, depends on the picture of course.

After that, I decided the background needed some color too. Once again, I went to Image > Adjustments > Hue/Saturation: (Again, just the saturation number)

And thats it!

You could also desaturate the background for a different look:

The advantage here is that AJAX applications can be developed quicker and with less chance of consistent errors.
Interesting facts for programmers on features:

• Reduces the learning curve on web application development
• Cross-browser compliancy on all functions
• Asynchronous Remote procedure calls more efficient between application and server
• Widget panels easy to manage
• History management and service layer work easier
• Debugging is a simpler process
• Event tracker that allows you to catch events on the client machine

The idea is to allow applications to be created easily by programmers with varying skills in AJAX and Java. The tool is fantastic at creating front-end applications like database programs and you can create an AJAX application while still using Java. The Java in turn is then converted to JavaScript and embedded into an HTML page.
The best programmers need the best tools. Though, it’s also about development time and hitting deadlines that can often be very tight in the world of IT. So, the need to create high performance applications more efficiently is always a requirement. Programmers can write the Java code and compile it into optimized code. By optimized, I mean cross browser compatibility that avoids HTML errors popping up.
It would be useful if Google produced a plug-in to allow developers to contribute further. For example, UI development is restricted. Though like the Android platform for phones and most SDKs such as the iPhone SDK, Google web toolkit will continue to attract new ideas for patches and application integration.
Much development time is lost dealing with browser related issues and maintaining the code at work. So, Google Web Toolkit helps here by reducing the time consumption spent building code and checking for errors.

I recommend application developers looking to test the functionality of Google Web Toolkit to try out a tutorial. This one on the IBM site will allow you to test the full functions and capabilities while teaching you the inner working of this AJAX tool . You will need Apache Derby for the tutorial which can be downloaded here

If writing AJAX applications is a month to month task, as a developer you should check out this tool and join the developers’ community at Google Groups. Before you embark on using the tool check the contributor’s guide
Your AJAX coding days just became easier.

The range of extensions varies from filter effects to tools that add whole design functions such as 3D effects and menu builders. There are many great sources on the web for add-ons that allow you to present more eye candy in any design work for web sites, posters, brochures, etc.

Photoshop add-ons allow you to extend the options for style changes in your designs

Here are the top 10 add-ons i.e. useful add-ons with links to their sources (where many more add-ons are listed) that will extend your ability to produce some of the finest Photoshop work:

1. AKVIS Retoucher –
A popular tool used commercially for Photo Restoration and scratch removal. It can also remove unwanted text, dates and is particularly useful for restoration of old or damaged photo collections.

2. Mask Pro 4 –
This masks backgrounds easily or just parts that need masking like hair or transparent objects. Say you want to place a picture of you in an exotic location, just grab the photo from the web and use this tool to add the photo to your picture background.

3. Local Contrast Enhancement –
This enables you to bring out the finer details that may be lost in a photo due to lack of contrast, darkened areas and blurry areas.

4. Virtual Photographer –
This is an all-in-one preset tool that handle a variety of effects for your work such as polarize, infra-red, gradient, all accessed via tabbed controls and the interface has a split-screen view for previews.

5. 3D Sphere generator –
3D and Photoshop don’t go hand in hand unless you have a plug-in like this. Now you can create 3D spheres and customize its parts.

6. Photokit Sharpener –
There are a few add-ons on offer for sharpness. The unsharp tool in Photoshop is so difficult to use in comparison. This tool will simplify your sharpening needs.

7. Eye Candy Software –
Eye Candy from Alienskin has long been a favorite amongst designers for adding a diverse range of effects to the Photoshop add-on arsenal. The products have different uses such as glass, fire, ice, seamless patterns and realistic lighting.

8. Magic Frames –
Add stylish frame borders from an expansive list to your photos and pictures or create your own.

9. Light Machine –
Lighting adjustment can be tough using the standard filter in Photoshop though this tool will help as it combines lighting adjustment with color based correction to reduce your design time.

10. Primus –
Add slick bevels and textures to your work rather than relying on the standard bevel shapes in Photoshop.

When it comes to being useful as a designer, there is no second choice when it comes to choosing software for the job. Reasons for choosing a plug-in should include usability, reduction in development time and extra spice options for every design. Choose your plug-ins carefully as too much time can be spent, rather lost, due to choosing the wrong one. This list should guide you in your work.

It can be a repetitive process having to repeat certain deployment parameters every time you deploy an application. In fact, it can be downright tedious particularly if it’s a big application for the web needing XHTML compliancy and the same folders set up each time.

Enter Deploy – a free open source application for developers. The online tool speeds up the entire deployment process by grouping your project folders into the usual structure without any manual setup.

Take a look at the screenshot.

Deploy makes application deployment so easy!

All you need to do is click the radio buttons of choice for the project folder, hit DEPLOY, and the application creates the project folder in seconds. The important aspects to understand here is how the tedious repetitive tasks are minimized. The application produces valid HTML and XHTML compliancy, valid CSS and folders for images, flash and PHP.

Choosing the XHTML compliancy will generate the necessary code depending on:

• XHTML 1.0 Strict

• XHTML 1.0 Transitional

• HTML 4.01 Strict

• HTML 4.01 Transitional

This then appends the standard HTML tag to the code:

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>

Then the doctype is set depending on your selection, e.g. if you selected XHTML 1.0 Strict, the appended code is:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

If you choose to set up a CSS folder, you can select from 3 choices:

1. None

2. Blank – for a blank style.css file

3. Reset – for cross-browser compatibility (something so easily forgotten)

What’s really great is its bookmarking feature. The application creates a zip file that can be bookmarked so when the developer returns to deploy another application, the zip folder is ready to be created again for the next project folder. So, the framework is structured for you at the click of a button.

From the application, choose the name of your project, and what needs to be included in the project folder. jQuery is widely used with web applications and this can be selected from the radio buttons. Once you hit the DEPLOY button, your project folder contains the files – index file with tags, title tag, and code linking to the CSS and JavaScript files.

The software is cross-platform working for PCs (windows, Linux) and MACs. As a developer, you can streamline your monthly deployment tasks and create project folders in no time at the click of a button – and it’s free!

]]> http://www.devwebpro.com/how-to-deploy-web-projects-fast-with-deploy/feed/ 0 http://www.devwebpro.com/sci-fi-style-website-header/ http://www.devwebpro.com/sci-fi-style-website-header/#comments Wed, 24 Jun 2009 20:45:32 +0000 Mark Rivera http://www.devwebpro.com/sci-fi-style-website-header/ Today I’m going to walk you through the redesign of OWeb2.com’s banner. We went with a sci-fi feel on this one.

While serviceable, this logo does the job. But I decided to go with a little more personality rather than a logo on a reflective floor…

I did want to retain the over all blue color scheme so I used the Eyedropper Tool to sample the gradient colors. I used the Magic Wand Tool to select the blue area to paint in. The radial gradient option was chosen and then clicked/dragged to create the gradient.

Another radial gradient was used here on a new layer but black was chosen to create more contrast. Also, take note that black to transparent was chosen instead of color-to-color.

This is a photo of a galaxy and some stars that was used as a focal point for our space scene.

I went to Image>Canvas Size to increase area for more stars. The Clone Stamp Tool was used by holding in Alt to sample and then brushing normally to paint more stars.

Another layer was created on top and filled with blue. It’s blending mode was changed to “Color” to change the entire…well color of the scene.

And then it was dropped onto the gradient header and cropped to fit. The blending mode was set to “Screen” to get the stars to show through just right.

I right-clicked the layer and Duplicated it. Filter>Blur>Motion Blur made the following effect like so.

Now onto the logo. After finding a font that I liked, I double clicked the layer where the type was and clicked the Outer Glow layer style. I played with the color, spread and style until I ended up with this.

Now this is going to seem extensive for a single text shine, but I think the result is worth it. First I used the Eliptical Marquee Tool to create this circular selection and filled it with a radial gradient from white to black. At this point it looks like a simple sphere.

Then I pressed Ctrl+T to transform the selection and stretched it out left and right making sure it covered all of the text.

Then I went to the text layer and Magic Wanded the area outside of the type with the “Contiguous” option checkmarked Off. This should create a selection where it’s everything but the lettering. Even the spaces inside of the letters. At this point I deleted the gray oval. At least the parts that are in the selected area.

I grabbed the Pen Tool and created this shape that we are eventually going to use to subtract even more from the gray details.

The Paths tab is located in the same window as the Layers. Once opened, I pressed the perforated circle at the bottom of the windows panel. This turns the pen path into a dancing ants selection. I hit Delete and killed the art within the selection.

The final touches were adding some light shafts. I turned the Marquee Tool back into a rectagular one then drew out a simple box. The top of the box was lightly brushsed with white.

The blending mode was set to Overlay to pull some vibrant blue into them. It was also rotated at an angle.

The light shafts were duplicated and rotated to taste for the final touches of the new website header design.

Open whatever image you want to use. I just want a closer squared image so I am going to crop mine some.

Duplicate your background layer two times. You will want to name your new layers so you know which is which. I did one layer horizontal and one vertical.

Make sure you have photoshops foreground and background colors their default by simply pressing D. Hit alt+backspace to fill your background layer with black.

Turn off one of your layers by hitting the eyeball in the layers palette. This is just so it is easier to see the difference between the two layers when you are working.

Now go to View > Show > Grids.

Bring up your Grid preferences by going to Edit > Preferences > Guides, Grids, and Slices. Or just Control K.

Now pick how big you want your pieces to be and pick a color that you will be able to see pretty easily. Here is mine:

Now, take your marquee tool, and start selecting your rectangles. I did my vertical ones first. Hold the shift key to select more than one. The trick to making this look weaved is you want to select more rectangles than blank spaces. So, I selected 2 squares and leave one. Once you have done that, click the Layer Mask icon at the bottom of your layers palette. You can see in the picture below that the squares I didn’t select are now black.

Do the same to the horizontal stripes.

Turn off the grid.

Hit Control and click the thumbnail of vertical layer.

Now press Shift, Control, Alt and hit the horizontal layer.

Save your selection by going to select, save selection and hit ok. We will need this in a few minutes.

Your layers palette should look like this:

Now click on your layer you just made and go to blending options. These are the settings:

Right click your outer glow and go to copy layer style. Then right click on your second layer and just paste your layer style so you don’t have to do that part again.

And that’s it!