You are currently browsing the archives for the Design category.
Posted 4 months, 4 weeks ago at 6:18 pm. 2 comments
Every new Sonic game follows the same pattern.
- Highly anticipated!
- Great Visuals!
- Sega’s Last Chance!
- Product is Released!
- Low Review Scores!
- Angry Fans
- “True” Fans vs Angry Fans.
- Next year, a New Sonic Game Announced.
- Rinse Lather and Repeat.
Once it reaches the point where “True” Fans:
- Whom, quite frankly, can’t spell.
- Can’t ever see any flaws in any Sonic game.
- Thinks their ideas are the best.
- Hates IGN and Gamespot reviewers with a passion.
- Wants every character in the game because they are soo cool!
- Will have a temper tantrum on anyone who criticizes the game.
- Will bow down before God aka Ryan Drummond.
- Will write fanfiction with their own “original” character with supapowerzzz!!11
- Will post tl;dr topics about why everyone hates their favorite character.
Again once it reaches the point where “True” Fans argue with Angry Fans, the whole internet universe explodes with trolling, angry letters, petitions, you suck, we all suck, nobody cares, just a plain ol’ mess thats only cured once a new sonic game is announced.
So a new Sonic Game has been announced! Will Sega make a critically acclaimed game that will calm everyone down, or will it end up being a failure like Sonic 06. Only time will tell.
Continue Reading…
Posted 1 year ago at 10:24 pm. 1 comment
Winamp 5.5 Launched this week with some new features and a new direction. Winamp unveiled a new skin called Winamp Bento, which sort of mimics the style of iTunes and Foobar. Winamp Bento is generally Winamp 5 + Media Library + Album Art. The skin is very micro so senior citizens should beware of tiny hard to read icons. The skin’s main attraction is its Media Library panes. Although very confusing to control, you can now change the media library to show only album art.
By default, it will show up with the Artist and Track List, and its up to you to figure out how exactly to make it show up the way you want. My dislikes for Media Library is how easily confusing it is to use. In the original Winamp 5, there’s 1 window for the main player, another window for the playlist, and then Media Library’s 4 panes of crazy going at you at one time! Its great for people who keep their music organized by album, but for the majority of users, nothing beats adding songs to the playlist.
Fortunately Winamp Bento has the option to convert the player back into the classic Winamp style, but with a few changes. Now the Playlist, Music Player, and Album Information is shown side by side. No longer will you have to worry about these windows taking up large portions of your screen.
Posted 1 year, 2 months ago at 1:10 am. 0 comments
Aim 6.5 has been released today and has now added the much anticipated Proxy Settings. Dr. Statistics says, this setting alone can do away with more than 60% of the connection issues people have. Now you can connect behind your company’s firewall and bask in the AIM glory. Well if you are using Aim at work I’d suggest using Aim lite instead of Aim 6.0, but anyways its still nice to have though. You can edit your proxy settings in Aim 6 by clicking Edit > Settings > Connections > Connect Using Proxy.
Aim 6.5, also changed the UI a bit by adding a new status bar to the top and moving advertisements to the bottom of the window. Aim takes a bite out of Facebook by adding Status Updates. These status updates allow you to type your own personal entry below your screen name, similar to GTalk, and Yahoo Messenger. Other new features include, text messaging a buddy using their cellphone number, and Aim Tips that show up right inside the IM window.
As promised, I will be making new skins each time AIM updates, so pimp out your aim with Aim Skins.
Posted 1 year, 6 months ago at 6:48 pm. 3 comments
One thing I noticed during skinning Aim 6.0 is that most of the buttons you see are not pictures. Infact "Boxely" the engine that renders the program has the capability to create gradients on the fly. If you had experience with making web 2.0 style buttons on the web, you’ll know already that the secret effect that gives a button its shine or glossiness comes from where colors are placed along a gradient. If your new to this or don’t understand what I’m talking about, I’ll show you a little demo of how colors are handled in Aim 6.0.
Solid Brushes
Aim 6.0 has a Solid Brush function. solidBrush tells the program that the particular ID of what your editing will have ONE color. The solid brush markup goes like this…
<solidBrush id="textColor.defaultButton" fill="#000000" />
Note fill="#000000", this is where you place the HTML Color Code. #000000 is the color code for black text. If you want to change it to another color you would change the letters and numbers after the # sign. Also there must be 6 Letter/Number combination in order to work.
Linear Gradient Brush
Aim 6.0 also has a Linear Gradient Brush. linearGradientBrush tells the program that the particular ID of what your editing will have multiple colors. The linear gradient brush markup goes like this…
<linearGradientBrush id="gradient.aimWindow.windowContent">
<rotateTransform center="50% 50%" angle="-90"/>
<gradientStops>
<gradientStop offset="0%" color="#121212"/>
<gradientStop offset="100%" color="#363636"/>
</gradientStops>
</linearGradientBrush>
Ok woah what happened here!? This got way more complicated than the solid brush. Well a gradient needs more than 1 color to become an actual gradient. Most of the entries in your skins will use linear gradients. In theory all solid brushes should be able to convert to linear gradient and vice versa. Now there are a few rules with linear gradients though. It needs to have a gradientStops tag and that tag must be closed after your gradientStop offsets. You also must close the linearGradientBrush tag at the end of the particular ID. Another rule is that you should begin the gradientStop offset at "0%" and end at "100%". Your free to place whatever values you want between those two colors. Aim 6.0’s boxely engine will render the blending it will take to those positions.
GradientStop Offset.
This is particularly hard to visualize if your new to creating gradients in photoshop or paint shop pro. What you need to do here is start off with one color at "0%" and end at "100%". The percentage tells you where that particular color will start and continue to. At the same time that particular color will also blend with the next gradientstop offset unless you specify otherwise.
Now your not limited to just 2 colors, in my skin, I use 4 to 5 different gradient offsets. By positioning the colors in a certain way you can create an effect where the colors smoothly create a bump like effect, or abrupt colors that creates a sheen glass like effect. Lets take a look at one of the mistakes I used in my skin.
<gradientStop offset="0%" color="#f3f8e7"/>
<gradientStop offset="25%" color="#8cc110"/>
<gradientStop offset="51%" color="#abd747"/>
<gradientStop offset="100%" color="#abd747"/>
Now you may not see anything wrong here, but if your as picky as I am, you’ll notice that the send IM button’s colors does not match the bar beside it. Take a look at the markup. According to my percentages, these colors will blend smoothly. The farther apart the percentages are, the more smoother bump-like the colors are… [however this isn't always true since you can just use 2 similar colors at the top and 2 similar colors at the bottom to make use of the abrupt glass like effect.] Lets fix this up to create a similar style.
<gradientStop offset="0%" color="#abd747"/>
<gradientStop offset="40%" color="#8cc110"/>
<gradientStop offset="41%" color="#D9FF82"/>
<gradientStop offset="44%" color="#8cc110"/>
<gradientStop offset="100%" color="#abd747"/>
Ok now you’ll see a major difference. Take a look at the markup, I’m using 5 gradient offsets to achieve this effect. Note that at 41%-44% the brightest color is used. Then it continues back to the regular gradient. This can be cleaned up better since its kind of redundant to have 5 colors doing that style when I could just fake it with 4 colors.
<gradientStop offset="0%" color="#abd747"/>
<gradientStop offset="41%" color="#abd747"/>
<gradientStop offset="44%" color="#8cc110"/>
<gradientStop offset="100%" color="#abd747"/>
There, nobody will notice the difference unless they have really keen eyes. Thats all for this lesson.
Learn More About creating Aim 6.0 skins
- Download Aim Skins -
Posted 1 year, 6 months ago at 3:12 pm. 9 comments
Screenshots of X! The Aim Theme. Link to Instructions on how to download this Aim 6.1 skin is located below.
Read More About Creating Themes
= Download the 6.1 Theme =
= Download the 6.2 Theme =
= Download This Theme For Aim 6.5 =
= Download =
= Download this Theme =
Posted 1 year, 7 months ago at 12:50 am. 2 comments
I took a quick look at this game and saw something shocking. First, its 3D and no, not that pseudo 2.5D, but completely 3D. Secondly, the preview video is running on a Motorola Razr. How in the world could that ever run on a Razr. That must be some souped up razr they got there. I believe its a BREW enabled Razr which brings me up to a point. Game Developers do little to address the differences in mobile phones. When your on their site searching for games for your phone, you really have no way of knowing how it would run and how it would look like. Take for instance, The Sims 2 Mobile. On some phones they are able to get better graphics, faster speeds, and wonderfull quality. Other phones we get the run down, boring, can’t do much of anything version. The gap between the high and low end versions were so great that people felt they were ripped off. I remember some angry rants we had in the forums where people wondered why they got the sucky version. There isn’t any guideline or system on any of the major gaming networks to tell you which version of the game you’ll get. Mobile phones don’t have the easy to read specifications compared to PCs. You can probably tell which game won’t run on your computer just by looking at the graphics, yet for mobile phones I have no freakin idea what would run and what can’t. The mobile gaming market is sparse leaving us with no direction to turn to when we want a particular game only to read that its not supported for our phone. Otherwise its still a awesome 3-D game for the phone and hopefully we’ll see standards when it comes to gaming platforms. So far we only have BREW and Java. Brew always gets the upper hand. Sun Sur!
[The Sims 2 Pets Mobile]
Posted 1 year, 10 months ago at 4:58 pm. 0 comments
Using Data from Last FM and Amazon, TuneGlue allows you view a map of artists and their similar connections. Its pretty cool that you can easily find new artists that stay within a genre.
I chose a map of Domu and the results were pretty spot on. You start out by typing an artist name in the search box, then click on them to expand. New nodes will appear as you can expand them even further. In my example above, I quickly found similar artists and went even further to the point where pretty much everyone was connected to someone. The framerate drops when there is alot of connections, which is expected.
Posted 1 year, 10 months ago at 4:50 am. 8 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.
Continue Reading…
Posted 1 year, 10 months ago at 6:11 pm. 3 comments
It took one day for me to be entirely lost in the crazy amount of stuff AIM has added. The major release was the Aim 6.0 client, which some have recommended it, while others find it unimpressive. Well I have already talked about Aim 6.0 before so lets move onto the new..
Continue Reading…
Posted 1 year, 11 months ago at 3:41 pm. 3 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.
Continue Reading…
Posted 1 year, 12 months ago at 10:27 pm. 5 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.
Continue Reading…
Posted 2 years ago at 1:18 am. 10 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.
Continue Reading…
