The first step in designing most things is to sketch it out. Sometimes pencil and paper works great. Sometimes a program like Photoshop or Gimp can suit it better. For this, I had a pretty good idea in my head, and I wanted a more concrete image, so I got to work designing it on the computer.
I checked Google for an image of the default player frame. Obviously, someone faked the character portrait in that one, but it had everything I cared about. I used it to get an idea of size and proportion while I drew out my background. I wanted rounded corners on one side and square on the other. The target frame will mirror the player frame so this way the portraits appear close like they're going head-to-head. I wanted the portrait to pop up out of the top of the frame a bit instead of being completely square. I made two lines for the name, one for the status, and put most of the icons along the bottom. My idea here was that "inactive" icons would be gray-scale and faded out. Some icons, like the voice and pvp ones, would be click-able in order to turn them on. I put the race, level, and elite/rare status in the bottom right corner.
I went online to find fonts. I had a ton of system fonts, but so many of them looked identical and so many were for foreign languages. So I took some time to look up nice, unique fonts. I also consulted other wow addons for font files like Adventure, Gammon, and Zekton.
For the HUD bars, I created an oval and manipulated it to create the curved bar. Chopped the top, and mirrored it to make the bottom. The idea was that this image would be repeated and layered to be used as the bar itself and the border. Another image would provide the sparkles around the bar. However, when I tried to implement this idea, simply scaling the image didn't create a nice border, so I had to make a new image as the border. Then I realized that layering the images created more problems when adjusting opacity, so I had to chop out the middle section of the border image... which meant zooming into the pixel layer and manually modifying the transparency on the image in order to create a nice, smooth look.
At this point, I was ready to start the coding and getting things functional. Stay tuned!
No comments:
Post a Comment