Browsing articles in "Tutorials"

Jul
27

How to Extract Files and Install A Skin

By WBMike // Life Tutorials, Skinning Aim, Tutorials // 19 Comments

Currently this extraction tutorial is made only for Aim 6 skins.
This tutorial has been updated for July 27th, 2009

I often get many questions on how to extract files from a zip file. This process is not too difficult but people seem very confused over the file itself. This tutorial will show you how to extract a file to any directory. The second part of the tutorial will apply these steps to skins hosted on this site.

This tutorial is made through Windows XP, if you are using another Operating System such as Windows Vista, certain names and functions will differ. Please follow the general idea of this tutorial to get a handle on zip files.

Page 2: Installing a skin

Apr
11

Adding Flash and MP3 Playlist codes to Bebo’s Code Snippet

By WBMike // Aim, AOL, Bebo, Code Snippet, Tutorials // 2 Comments

You need one of the following modules/applications

About Me:
Code Snippet
Gigya’s My Stuff

Doesn’t code snippet already allow flash?

Well it does, but you may have noticed your Playlist.com code may not fully work within the code snippet. Sure the graphics pop up but the flash code itself is missing. Here’s an example of Code Snippet using the proper embed code.

code-snippet

As you can see in the picture above, the music player doesn’t show up even though the embed code is correct. The Code Snippet module allows flash but under a very specific code. What makes this code difficult, is that you will have to cut and paste the flash code into bebo’s special format. We’ll take you step by step on what you need to do to get Playlist.com and other flash examples working correctly.

Please pay attention to the steps carefully. Playlist.com code insertion is listed on the second page.

How does Bebo handle Flash?

Bebo uses flash through it’s own SNML protocol. SNML is pretty similar to HTML, but there are some slight differences. You may have noticed that both the About Me and Code Snippet modules say SNML. This is where you would paste Bebo’s SNML code.

Step 1: Find your src=

The first thing you must locate is your src= code. This src code begins immediately after the after the equal sign. Highlight the code your flash application gave you. You must highlight from the first quotation mark up to the next quotation mark. After you highlight this code, right click and press copy. The example below shows a Vimeo video code.

<embed src="http://vimeo.com/moogaloop.swf?clip_id=2072369&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=14c963&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="225">
</embed>

The code that follows src= is highlighted in blue. This is the code you will paste into Bebo’s flash code in Step 2. Use the scrollbars to see where the blue code begins and ends. Note there are only two quotation marks.

You should not have more than 2 quotation marks at this point. Later on we can add more quotation marks.

Step 2: Bebo’s Flash Code

<sn:swf swfsrc="insert swf or flash src code here">

Take the blue code you copied in Step 1 and replace it over the purple text in Step 2.

Step 3: Paste your flash SRC code inside Bebo’s SWFSRC code

<sn:swf swfsrc="http://vimeo.com/moogaloop.swf?clip_id=2072369&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=14c963&fullscreen=1">

If you insert the code correctly you will have it show up like this. There should only be 2 quotation marks in your entire code up to this point.

Advanced abilities

Bebo’s flash code can also scale by width and height. You can do this by adding this to your code.

width="xxx" height="xxx"

Replace xxx with the number of pixels you want it to be. Your code could end up looking like this.

<sn:swf swfsrc="http://vimeo.com/moogaloop.swf?clip_id=2072369&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=14c963&fullscreen=1" width="199" height="160">

That about end it. If you need more help the next page will explain the exact same method with Playlist.com

Sep
8

Aquistica Park: Red Social Shopping Layout

By WBMike // Paint Shop Pro Tutorials, Tutorials // No Comments

Paint Shop Pro Layout Tutorial

Welcome Back! Another PSP Tutorial for you! Aquistica Park is a layout made in PSP9, it is compatible with PSP8 and Up. This tutorial will rely heavily on Vector Tools. It will teach you in the beginning on how to use them, after that you should be able to know what to click to reach there. Each tool will have a bracket with what key you should press in case you cannot find it. For Example with the Text Tool (T), you can press the letter T on the keyboard to select it.

Feb
1

PSP Tutorial: Blue Web 2.0 Layout Advanced

By WBMike // Paint Shop Pro Tutorials, Tutorials // 12 Comments

The first Web 2.0 Blue Layout Tutorial focused on the text of the page. This tutorial will follow up by teaching you extra features and style you can add to the layout. Now there is an Added Logo on the left side with a small Menu Bar. On the right side is a graphic of the grand opening. This can be tweaked so that you can lower the opacity and right some text on it if you want. Below the ticket area, are two empty spaces which can be added for extra advertisement elements to go to another part of the site. Below that a Grey Box features a Download Now button, where you can quite possibly put a PDF file of the Schedule information, or change it to something different entirely. Subsections finish up the site where you can send a link to another area. This tutorial doesn’t focus much on text, and your welcome to ADD text to any areas you see fit. This tutorial is compatible with PSP 8 to 11, it was made with PSP 9.

Dec
8

PSP Tutorial: Web 2.0 Full Blue Layout

By WBMike // Design, Tutorials // 12 Comments

This Tutorial is compatible from PSP 8 and up. It was made with PSP 9. Sticking to Web 2.0 Layouts can be pretty easy once you get the hang of it. The problem is that they depend on the use of white-space, which can take some time to get it perfect if your coding a site. This is a basic tutorial to teach you how to start the layout, but your welcome to modify it in anyway you like. This layout style is seen on many web 2.0 designs, in fact bluedot.us is what it closely resembles, but it uses other clich� elements on many other web 2.0 sites. I call this a "Full" layout because it encompasses the whole screen area. In an upcoming layout tutorial we shall try the "Center" layout which is prominent on many blogs. This tutorial is split into two parts, the first is the layout itself, and the second is the logo.

Oct
30

PSP Tutorial: Web 2.0 Caution Bars

By WBMike // Design, Tutorials // 5 Comments

Web 2.0 has a whole bunch of graphic memes where certain styles and patterns are used. Caution bars are easy to do when you manually create alternating rectangles and rotate them. This is a great technique and all but it falls short when you want to make a seamless tile. In Photoshop, the technique is rasterized and easy to do. However for a Web 2.0 design, we’d like to keep things vector just in case we need to change something quickly, for example, making one of the colors transparent. Now I’ll introduce the 1st out of a series of tutorials that explains how to make some elements of a web 2.0 design.

Oct
15

PSP Tutorial: Windows Media Player 11 Button

By WBMike // Design, Tutorials // 6 Comments

Here is our second tutorial for Bumped! With this 3 part tutorial you will learn how to create a Windows Media Player 11 Button Entirely in Vector. Oye Vaye.. This tutorial is very challenging and fustrating, and you may give up when you try to edit "nodes." I have split the tutorial down to 3 levels of difficulty. Those who want to quickly make a button with the least amount of features can stop on the first page. If you can handle a challenge try to make it up to the third page.

Elements of WMP 11 Button Design.
The Button is made out of 5 Components.
1. Blue Circle
2. Top Shine
3. Shine Curvature: Optional..
4. Bottom Glow: Optional..
5. Bottom Left Reflection: Optional..

The Hardest part of this tutorial is the [3] Shine Curvature and [4] Bottom Glow. It will require advanced Node Editing. Node Editing is where you change the shape of the object using the pen tool. You will have to move lines a bit to get it right.

Sep
29

PSP Tutorial: Windows Media Player 11 Navigation Bar

By WBMike // Design, Tutorials, Uncategorized // 12 Comments

Hello! Our first tutorial for PSP9. It is compatible with other versions of PSP also. Windows Media Player introduced a slick Black Aqua look. What makes Black Aqua hard to create is its use of colors. You can’t really use pure white or else it will turn out as a strip of white, and you can’t fade to white because it will come out embossed and unprofessional. As PSP Graphic Designers, you don’t really get much slack from the Photoshop Community as they really think PSP isn’t capable of anything. Sometimes they are right, but we still can push the limits when it comes to interface design, with the added benefit of more control from the vector tools.

Vectoring isn’t pretty much heard of in the PSP community, and its widely avoided because it features alot of clicking and editing. Besides, making a bunch of rectangles just look uninteresting. I want you to think of vectors as rectangular boxes. Boxes that can be Opaque, and boxes that can be transparent. This Tutorial will also use layers for neatness, so make sure you are versed in using layers.