In the past, a LOT of Habbos have asked us how to create videos of the Habbo client – mainly because they want to show their friends, customers and audiences how good they are at building, using Wired furni or hosting games (among a LOT of other things, of course!)
Depending on whether you are using a Mac or a PC, you’ll need to look at a different part of this blog (this is because different software and procedures are required).
For Habbos that use Mac
If you have a Mac, LUCKY YOU! This means you don’t need to download any extra software to actually record your screen. You’re winning.
First, open up Quicktime Player (you can usually find it in the Mac’s Launchpad in the ‘Other’ box). Once you have it open, you need to create a ‘New Screen Recording’. You can do this by right clicking on the Quicktime Player icon on the bottom toolbar and then selecting it from there.
Once you have clicked on ‘New Screen Recording’, a little Quicktime Player box will appear on your screen; to start recording you just have to click on the red ‘record’ button.
You’ll then be presented with the option to record the entire screen by clicking the screen, or recording just a part of the screen. To record just a part of the screen, drag the mouse pointer over the area you want to record and let go to record.
Once you’ve finished, go to the Quicktime Player icon on the bottom toolbar and right-click and select ‘Stop Screen Recording’.
Once you’ve stopped the recording, you need to save it. Go to the top toolbar; click on ‘File’, then ‘Save’.
For Habbos that use PC
OK – so the process to record screens if you are a PC user is still simple so don’t panic, but PCs don’t (generally) have a built in tool for this purpose. So, you’re going to have to download a bit of software called VLC Media Player. While this is a very well known program and the above link goes to a Google-verified website, PLEASE get permission from the person whose computer you are using BEFORE downloading and installing it!
Once you have downloaded it, open up a new VLC Media Player Session and click ‘Media’ and ‘Convert / Save’ (strange option to begin a new recording, but believe us – this is correct!)
After you’ve clicked, a new window will appear called ‘Open Media’. You need to go to the ‘Capture Device’ tab on the far right, and from the pull down menu to the right of ‘Capture mode’, you need to select ‘Desktop’.
TIP: before recording your Desktop, make sure there is absolutely NOTHING confidential in view there. So be careful to close any programs or browser windows with anything personal in them.
In the same ‘Open Media’ window, there is an option to change the frame rate. To create a smooth-running and decent quality video, we’d advise you switch it up to around 30.00 f/s. Once you’ve done this, click the ‘Convert / Save’ button at the bottom of the ‘Open Media’ screen.
Now the ‘Convert’ window will appear. Check that the ‘Destination’ is where you want to it be saved, and if you want to change the resolution click on the little tool icon next to the ‘Profile’ drop-down menu.
Then, hit the ‘Start’ button! And YOU’RE DONE!
Habbo’s economy functions much like any other real-world economy – the trick is to buy low, and sell high. So, for example, if you bought a furni (or ten of the same furni) for ten credits each, and then a year later the price of that particular furni had increased to fifteen credits, for each one that you sold, you’d make five credits. Sounds REALLY simple, right?
It definitely sounds simple, but the real trick is to know WHEN to buy and WHEN to sell – and to know this you need to know how much furni is at any point in time. As well as knowing the right prices, you also need to know how to make the absolute most out of the Marketplace.
See the graph below and to the right – it shows the fluctuation of the price of (an unspecified) furni. You can see that the furni starts off high, but starts to fall in value. Once it’s fallen to a specific point, we’ve indicated WHEN you should buy a particular item by highlighting the area in red. The perfect time to buy is when the item is at its lowest value. To know when exactly an item is at its lowest value is something you will have to practice.
In every situation, you’ll have to work hard to KNOW when an item is about to go up in price. It will nearly always be due to an item becoming harder to find (suddenly or gradually) – perhaps one rich Habbo has bought a large chunk of the total number of that particular furni and is hoarding them, or perhaps someone is using them in a building project. You have to keep your ear to the ground to know!
Then, once the item has risen enough, you want to sell it while it’s high! So, simple enough when you know WHEN to sell, right?
Using the Marketplace efficiently
For the bare fundamental basics of how to use the Habbo Hotel Marketplace, see here.
It’s really important that you familiarise yourself with these basics, as it’s definitely the most useful tool for Habbo traders. Selling your goods on the Marketplace (often known simply as ‘MP’ by Habbos) is a quick and easy way to get rid of furni for standard prices.
Because of this, it’s a really brilliant way to take advantage of what are considered ‘lazy’ traders. A lot of Habbos sell large amounts of furni, often in bulk, for prices much lower than normal. It’s considered wise to check the Marketplace regularly for deals like these, as there’s often a LOT of money to be made! But, like any good deal on Habbo, you’ll need to have a good idea of what the real average price for furni is.
In some situations, if you have a medium to high value item, and you want to sell it quickly and easily without the bother of Auction Rooms, it’s better to use the Marketplace. Habbos who really, REALLY want certain furni are sometimes more likely to pay over the average price if it means they can get it right there and then. This is particularly true of the richer Habbos.
Thanks to Habbos: UnderCover. / Badge / RadMatta / Audemars / B / DJ_Shadow / Celerys
Bubbling in beta for many months and the time has finally arrived… the shiny new Habbo Web is ready for the catwalk!
As well as the ability to easily view your profile, badges, and friends, our highly talented developers and designers have worked through all our ideas and feedback to produce a whole range of new and exciting tools.
- Modern look-and-feel
- Smooth Web-to-Client transition
- News & updates accessible before login
- Access to private messages and minimails offline
- Optimised for mobile and tablet viewing
…PLUS tons more exciting features coming soon!
Try it out!
Go take a look at all the shiny new things:
- Shop HC, BC, rares, bundles and credits in the entirely redesigned HabboMall section (used to be Credits)
- Explore all of Stories on the web, now called Creations
- See if you have any new private messages on the Messaging page
- Check out ideas on how to play, or brush up on your Habbo Way, in the brand new Playing Habbo section
You can find out more about all the exciting new features and what else you can expect in the FAQ below.
More stuff to come!
Some pages that required more intensive development are still ‘works in progress’. We hope to have them ready to go in a few weeks, but in the mean time you will be redirected to the old web for certain pages. Don’t worry – all your activities are still safe, including credit purchase transactions!
This project has been in the pipeline for a while so we are thrilled to finally let you get your hands on it! This is a very proud moment for all of us – in Finland, Madrid and London – as we can show you the first glimpses of the jam-packed future of Habbo.
Q: Why a new Habbo Web?
A: After almost five years since the last refresh, we felt now was the perfect opportunity for a responsive web makeover! This exciting new web comes with a modern look-and-feel, plus a ton of awesome new features and tools for you to express and share your creativity.
Q: What to expect from the new Habbo Web?
You can expect a whole list of fierce and fabulous new features such as:
- Modern look-and-feel
- Awesome tools to help you express + share your creativity inside and outside of Habbo!
- Optimised viewing for mobile and tablet
- Smooth Web-to-Hotel transition
- Make selfies, selfies and more selfies!
- News & updates accessible before login
- Private messages and minimails accessible offline
…PLUS tons more exciting features coming soon!
Q: Why doesn’t the client open in a popup window, like it used to?
A: We wanted to improve the transition from web to Hotel and make it a more seamless. If you prefer the old way, you can simply right-click the ‘Go to Hotel’ link in the right hand of the page and select “Open in new window”.
Q: Why do some pages, like news, take me to the old web?
A: Some pages that required more intensive development are still ‘works in progress’. We hope to have them ready to go in a few weeks, but in the mean time all your activities are still safe!
Q: What happens with the stuff I bought to customize my homepage in the current Habbo Web?
A: We have taken your requests into account and are looking into how we can offer the best possible solution. Until then, you can see your homepage here: ex.habbo.com
Q: Where’s my group home page?
A: We’ll add group home pages to the new web later. Until then, your group page is available on the old website – just change www to ex in the URL (so it starts with ex.habbo.com).
Q: Where can I select another avatar, manage my friends or change my email / security questions / profile visibility settings?
A: You can change your password on the new web, but to access any other settings, you need to log in at ex.habbo.com. Whatever changes you make in the settings there will be reflected in the new habbo.com as well. We’re working hard to make all the settings available in the new web.
Q: What happened to Stories?
A: All the old Stories content is now on the web: selfie editor, competitions, pixel art upload, all your previous art etc. Just click Community and you’ll see a page called Creations.
Q: Where can I view my profile?
A: You can view all your badges, rooms, groups, friends, and creations by clicking your avatar name in the top right and choosing View my public profile.
Have you logged into Habbo today and noticed that when you zoom things are a little… different? No don’t worry, nothing is wrong with your room or monitor, we just made a little tinker here and a small tuck there. Oh. And we might given a standing ovation coupled with a fond farewell as some long time members of the Habbo graphic family bowed and gracefully walked off stage. Before you start hyperventilating (we have paper bags standing by just in case though) lets talk about what we did and why it’s a good thing for everyone.
Did you know how Habbo previously zoomed the room view? Maybe you did, but for those that didn’t, it worked like this: Items (such as furni) would be hand drawn at two different scales and the game would flip between those pre-drawn scales when the zoom button was pressed. Kind of like quickly swapping a camera between two independent and fully decorated dioramas. The result was something that looked like zooming even if it was more of an illusion. Which means zooming has been… a lie… in a way. Earlier this year we introduced a new zooming method as part our Habbo iOS app that works pretty differently than the desktop zoom (aka lie). Alright the pinching action is obviously different but we’re talking about what’s controlling the visual scale of our graphics on-screen. Instead of toggling between two sets of pre-made images the iOS app is using only one image (the close-up version) and is scaling it to other sizes with some beautifully written code. Magic code; It’s like fairy dust. The scaling code lets iOS Habbo zoom in uncomfortably close and equally far away while keeping the experience pretty seamless and pixelicious (by the way, we’re calling the developer that dreamed up this magic code “sparkles” from now on). Starting today Habbo on the desktop will utilize the same code based scaling that’s found in our iOS app. The classic magnifying glass button will still toggle the room view but instead of having double of everything we’re scaling all items on the fly, from the large assets, with that lovely lovely magic code. That means we’re no longer using the pre-drawn small scale graphics. They’ve been ushered into a well deserved retirement. We all know those little graphics held a special place in your hearts (we’ll actually miss them too), and you’re more than welcome to take a little “alone time” while you get accustomed to the new look of zooming, but think of all the stuff we can do now that they’re gone! What? Too soon? Ok, think about it this way and you’ll see why it’s an exciting move.
Our production team is pretty small (even I can count the members on just over one hand and I’m horrible at counting). When they work they’re given a set amount of time to complete each of their items or they get sent to the “room of shame™”. Redrawing graphics can take a lot of time to get them to the point of being polished enough for use in game. You might think I’m pulling the wool over your eyes but about thirty percent of our time (or more for complex stuff) is devoted to redrawing. THIRTY PERCENT! That’s crazy and all that time adds up when we’re making a campaigns worth of materials. By removing the need to draw everything twice our production team just gained some valuable time to spend on other projects. Think of it. Clothing can be updated more regularly. New pets will be birthed into existence more often. Builders club can have more exclusives to build with. Not to mention, your rooms will even load a bit faster since we’re only using one graphic.
Some might feel like we’ve cut out a big piece of Habbo history with this update but at its core is the aim to better focus our efforts so we can ultimately make the kinds of things you all are asking for. A pretty good trade off in my mind and we hope you also see the benefits.
Oh, by the way. I should point out that the scaling code takes your monitors pixel density into account. So if you have one of those high pixel density monitors (retina macs for example) you’re in for a treat! I’ll leave that to you to figure out though!
For those of you that have logged in today, you will have received an EXCLUSIVE memorial furni (Seen above). We hope you like this little, tiny, mini memento!
It’s here!! *drum roll* & *crashing gong sound*
The New Habbo Web Beta has been unleashed on the general public in .COM. This is a very proud moment for our community as we get to be the first to catch a glimpse into the future of Habbo.
New ways to view your profile, badges, friends and creations are only the beginning. Our development and design teams have been really inspired by your past feedback and are asking for more! Read the FAQ’s below and check out the new web at:
Q: Why a New Web?
A: Whether you’re on a mobile phone, tablet or desktop computer, Habbo’s new scalable and cool looking web will streamline the experience for everyone, giving your rooms and creations lots more visibility through sharing!
Q: What is Beta?
A: Beta means that what you see now is a work in progress. We’re working round the clock to fine tune the tools and features that will be added as we go along. We’re looking forward to receiving feedback from you to ensure the most awesomely Habbtastic experience.
Q: What to expect from the future Web?
A: Fierce and fabulous stuff such as:
-Exciting feeds about your friend’s activities and community updates.
-Ability to share your creations outside Habbo.
-Customizing your profile page to make it ever so “you”.
-Managing your friends and groups.
-Access to credit pages.
-Fun tools to help you get creative and boost your notoriety.
Q: What can I do on the New Web?
A: We’ll be continuously making changes and improvements to the Web but you can already start trying out cool stuff such as:
-Browse the news promos (some articles will still open in the old web).
-Profile pages (currently display basic info, lots more coming).
-Like your friends creations.
-See notifications about who liked your creations.
-Move to and from Hotel easily.
This means you can take part in competitions, check out other Habbo’s profiles and find out who’s been checking yours!
Remember though, this is only the start. A lot of what the future holds depends on you, so get involved!
Q: How do I get involved?
A: By joining our upcoming Habbo Web Beta polls and feedback activities. Stay tuned!
It’s that time again! No, it’s not time to change your Habbo babies diapers. Sheesh. It’s time for another Summer School Q+A Session with notMiceElf. We’re still glowing (aha, glow… get it… yeah, you do) from the last Q+A so this one had better draw a smile on our face… and as always, you can submit a question of your own when the question submitting articles appear. So get those questions ready!
How do you make a good GIF? (question posted by shiony)
This question looked so simple at first glance and then I started thinking about how to answer it and spiraled into animation and my brain pretty much flew out of control. So thanks for giving me a minor headache before my morning coffee could kick in, shiony! The idea of animation is a bit too meaty for this blog post so I’ll focus more on setting up an animation and then go over a decent way of saving gif files.
First off. Animation as a process is going to be dependent on the program that you’re using. Some programs don’t support creating animation so if you’re aim is to animate make sure the program you’re using has support for it! If you’re just looking to save out a static (non animated) GIF you can skip all the way to the end. I’ll be using Photoshop but the process is going to be mostly the same from program to program. I would suggest finding a tutorial that breaks down the specifics for the program you’re actually using though. General info only gets you so far :p Ok, on we go…
Animation is all fake. Yep. It’s an Illusion whoooo *waves hands around*. I’m sure you’ve been told this a thousand and one times already, but, animation is a sequence of static images with slightly different content. Each one of those static images is called a frame. When viewed in quick succession we interpret the changes from frame to frame as motion. The amount of frames we see in a second is called the frames per second (technical, I know) or fps (you gamer types are saying, “hey, that’s the acronym for first person shooter!”, but animators had it first, so there) but you can sort of forget this concept because with gifs the fps is more about setting a delay per frame vs a standard x frames per second.
First thing we need to do is make a new file. The size doesn’t really matter (stop laughing) as long as it fits what you’re animating, but smaller is generally better for pixel animations. The resolution of your image, on the other hand, is something you’ll have to pay attention to. Pixel art should be made using a resolution 72 pixels per inch. Don’t even question it or seek an explanation for why it has to be that number. It’s law. Obey.
The next thing we need is an animation timeline. In Photoshop the timeline can be found under the “Window” menu and then “Timeline”. In older versions of Photoshop it’s listed as “Animation” instead of “Timeline”.
Once the Timeline is opened choose to make your animation frame based. The frame method is pretty common for other pixel animation programs and is easier to understand for beginners than the newer tween type timelines. Plus, frame based animation is classic.
In order to make an animation you’ll first need to draw (or have previously created) some animation frames so that you can string them together. Every frame of your animation should be a new layer in your layer palette. Whether it’s pixel art or hand drawn the concepts are the same. You’re aiming to draw images so that when linked together their motion has a good flow and reads clearly. This explanation is so rudimentary that it’s actually making me cry a little so if you’re at all interested in real animation you should find a good book (or, yah know, youtube it) on the subject. There’s a set of 12 principles that Disney Animators have based their work on for ages. Well worth a look.
As a little tip, there’s a simple way to test the movement between frames using a technique called “onion skinning” which lets you see several frames at once. Photoshop doesn’t support this outright either. Joy. In order to get something similar to the onion skin on Photoshop you’ll have to turn down the opacity of the layers under your current drawing so you can see them as you drawn new frames. In traditional animation animators used a light box to see through their drawings… and this is just an emulation of that technique.
Alright, when you have your drawings ready take a look at your animation timeline. Clicking the “new frame” icon at the bottom of the animation timeline will make frames for your animation and you’ll need one frame for each of your art layers. With one of the animation frames selected go to the layers palette and hide all the layers but the ones you want visible for that frame. In my example you can see that I’ve got a grey background layer and an art layer visible in the first frame. Hiding layers can be done by clicking small eye icon on the left of the thumbnail. Do that same process for every frame in your animation. Nothing like good old repetition to get the blood flowing…right?
Modifying the “delay” for an animation frame will change how long, in milliseconds, the frame is shown for before going to the next frame. You’ll need to find a delay per frame that looks smooth with your animation. Animations that are too slow will appear less seamless and show individual frames more while those that are too fast don’t have enough emphasis and could suffer from frame skipping. Browsers will often forgo frame delays under a certain speed too… so it’s a good idea to check your animation on a few different browsers to see that it’s working the way you want it to.
The loop feature will let your animation loop infinitely or by a set amount. Most gifs you’ll see around the internet are infinitely looping. And that covers the animation portion. Phew. Are you still breathing? *poke poke*
Saving Your File:
Something to remember about the GIF format is that it’s only an 8bit format so it has a max of 256 colors. Pixels either have color or are fully transparent (this counts as a color :p). GIF’s don’t have the capacity for semi transparent pixels like a 24bit image does. If you’ve ever tried to save GIF with more colors than the maximum allowed (like a photo) you’ll see a color reduction as the colors get compressed to fit into the 8bit palette. You’ll need to be considerate of that max color count when you’re making images (this is where dithering and restricted palette pixel art excels!). Don’t fret though because 256 colors is still pretty high.
In Photoshop you’re going to use the “Save for Web” option from the “File” menu and then select the GIF format. The type of palette mode (Selective, Perceptual, Adaptive, Restrictive)… really doesn’t matter. Very simply, the palette mode gives preference to certain types of colors over others when reducing the colors to fit into the restricted 8bit palette. You can test them out and see which you like (we tend to use Selective for any gifs we make). Any kind of automatic dither options should be avoided for pixel art and aren’t all that good anyway. If you’ve payed attention to your color count while you were drawing you’ll never need this option anyway. Same can be said for the transparency dither. Ew. There should be bumper stickers with the phrase “Just say no to transparency dither” inscribed on them.
If you’re using a program that forces a gif to save using the windows palette or something other than the four listed above… drop kick that program into the trash bin and get another one. Programs that do this often auto-dither to try to approximate the look of the original palette. You’ll get images that have really oddly color pixels in them when saving this way. It looks horrible. Really horrible. As in, my eyes are bleeding horrible.
For the color amount, if you didn’t use all 256 colors you’ll only see the amount that you did use up, so don’t freak if you see a lower amount. The matte option is a color that is added to semi-transparent pixels so that they become fully opaque and is mostly used to match those semi transparent colors to the color of a web page. For example, if I have a shadow that is a transparent black, a white matte color will make that color a light grey in my final image. If you choose no matte color the pixels below certain transparency will be removed while those above will be fully opaque. Realistically though, if you’re making straight pixel art you should never have semi-transparent pixels.
Any option for web snapping means the colors in your palette will be shifted to match the standard web colors from like 1985 (which are pretty ugly). You can avoid this option like the plague. Please.
And, that’s it! Not too bad right? If you’re on another program other than Photoshop you’ll probably have a “Save As” option and a gif file format. A lot of the features like palette type, colors amount, and dithering are pretty common across many programs so it should still be relevant. Certainly any pixel specific program will have these options for your GIF needs! Best of luck GIF-ing around the internet!
Welcome dear reader to another insightful installment of “that guy who writes too much” otherwise know as the Q+A sessions with notMiceElf. We’ve posted some pretty interesting responses so far and this weeks is bound to be another nail biter. Nail biter, as in, you’ll probably get tired of reading and stop to chew your nails (which is a bad habit, you should stop). Steel your resolve… here we go!
How do you make items that glow transparently? (question posted by mohawkdude17)
Thanks for the question mohawkdude17! Ah glows. The one element in Habbo where it’s always always always ok to use smooth gradients… and… not pixel art. I’ll let that sink in for a second so that the wide eyed stares of horror can dissipate. It’s alright, take a deep breath, you’ll be ok that it’s not pixel art. Ready to move on now? OK good. This explanation is going focus less on “how to draw a glow” and more on “how a glow is made” so could be a little more technical than some might find interesting. But it will hopefully give you a never-before-seen look under the hood of Habbo! That is until I’m told to stop because I’m telling you too much.
Have you ever seen the medical book illustrations that show the different systems in the human body on different transparent sheets of plastic? Well, you can think of Habbo furni in a very similar fashion. No, furni doesn’t have a circulatory system, don’t be silly. Furni does, however, have different layers (we call them slices) that make up its whole and each layer is stacked on top of the other in our rendering system, much like pages in a book. Most of the time these layers are used to control where different parts of an item reside in the game space in relation to an avatar (or other item) within the same tile (tiles by the way are, non technically, those squares on the floor that let you walk around and place items in). For example, the arm of a chair needs to be in-front of a seated avatar so gets sliced out of the main chair graphic, and placed above the space a seated avatar resides in.
Going back to the book analogy, it’s like saying page nine is on top of page ten which is on top of page eleven. Having the ability to layer is important because it means a glow can be drawn independently of the furni pixel art and added as an overlay later. To get the layer to look like it’s glowing we change it’s blend mode. A blend mode? That’s just a fancy way of saying how two graphic layers are mixed together. You might not know that you’re already familiar with the most common blend mode, normal, where no mixing occurs. The top layer simply covers over the bottom layer. It’s what you’d expect when stacking objects… so it’s pretty aptly named as normal.
The blend mode Habbo uses for glows is called Linear Dodge (or sometimes Add) where layers get summed (aaaaah maths) together to increase the brightness of the underlying layers. With this blend mode, blending with white will produce white, blending with black causes no change and blending with the shades between white and black will add degrees of luminance and hue to the base layer. I’m sure that made so much sense that you don’t need an example… but I’ll give you a one anyway.
See how the bottom set in the example causes Frank to gain brightness and a blue tint across his chest when the gradient graphic is applied? Pretty cool. The layer with the Linear Dodge blend mode gets applied to whatever is directly under it; be it floor, wall, another furni, or avatar. Since whatever is under the glow graphic will be brightened it makes it appear as though the object has a glow to it. Sometimes the glow is made using pixel art for things like trophies where the glow is very confined, but more commonly it’s used as a light source and is therefor a gradient and not pixel art. The aim with these types of glows is to make the brightness subtle and not wash out the underlying graphics. You’ll notice in the next example that if a glow is too bright it becomes overpowering. The closer a color gets to white the more brightness it adds to the graphic under it until it becomes white (which is too much brightness). You’d think that we could adjust the opacity of a glow graphic if it were too bright but … nope. Looking at the example again you can see that while we can reach the same level of brightness as the normal version, all the warmth and saturation has been lost. We’re left with something that’s pretty gross looking.
There’s another glow style (more of a fake glow) that’s not used as often as the blend mode type but does get used for certain types of items. What’s a fake glow? Well, a fake glow doesn’t directly change the brightness of a graphic that’s under it because they’re just tinting through opacity. To make a glow in this style our production artists will use a feathered gradient and collapse it directly onto the pixel art making a single layered graphic. It will look like it’s glowing, but it’s really just a visual trick. You’ll notice in the example that this style isn’t as bright as the blend mode style and some of the warmth is gone.
These types of graphics with fading transparency weren’t usable in our old Shockwave client and so are only seen in modern items. The benefit of this glow is that we can apply it to things where the original glow style isn’t supported. Hand items for example. Items like the crackable eggs or piñatas also use this method for explosions because the simplification of many layers into one helps maintain the relative sanity of our production artists (lots of animation layers can be little overwhelming to keep track of ;P).
And that’s all there is to know about glows. Some programs like Gimp and Photoshop have the blend modes that were mentioned built in so you could try your had at creating your own glows using them. Good luck! Remember you can submit your own questions for the Q+A sessions when the articles appear on the site so keep on the look out and your questions ready!
Another week and another Q+A session! All right all right all right. We’re assuming that since you’re reading this now your eyes didn’t spontaneously start bleeding, or have since healed nicely, from the last Q+A which means our legal team can relax a bit (phew). Remember you can submit your own questions for the summer Q+A sessions with notMiceElf through the articles that appear on the site so get those questions ready!
What programs would you recommend for beginners, and why? (Question posted by Hanna.Yeap)
Thanks for the question Hanna.Yeap. I’ve heard the “what program?!” question a lot over the years and in that time I’ve developed the most succinct and all-encompassing-mostly-perfect answer that you’ll ever hear. Ready? Ok, here goes; It doesn’t really matter. You can probably imagine the types of responses I get from giving that answer so before the “he doesn’t care” train rolls in let me explain my reasoning. Oh, and then I’ll give you a list of programs that are pretty decent as starting points for anyone that wants to explore them (see, I do care).
The most important point to remember when making any kind of art (traditional drawing/painting, digital painting, vector, 3D, typography, you name it) is that the tools you’re using to make it are just that; Tools. A lot of the time beginners think that choosing a really “good” program will make them better faster. Which, is kind of cute in a naive sort of way. It’s a bit like thinking that an HB pencil will make you better at drawing versus using a 2B pencil or charcoal. Tools don’t magically grant you skills or simplify the process all that much. Ultimately all a tool does is serve you, the artist, and compliment your skills and your knowledge. If you’re just starting out you won’t have the skills or knowledge to gain any real benefit from a specific program. So. It really doesn’t matter where you start or which program you start with. And, just to be clear, the “goodness” of a program is a relative concept anyway. It’s kind of sad when someone says a program is “bad” simply because they can’t use it beyond its immediate and obvious limitations… or that it so readily shows them their own limitations. Lots of beautiful work is created on “bad” programs. Something to keep in mind.
Ok ok, sheesh. If someone is truly interested in learning pixel art, or digital art in general, here’s what I’d suggest.
Oh, by the way, If you’re only looking to edit existing Habbo graphics (commonly labeled as “alt-ing”) and not really aiming to progress past that then you can probably stop reading and pick any program that edits pixels (go ahead, I won’t be offended, there’s a small list below). That’s not intended to come off as, “omg, notMiceElf hates alt-erzz!1”. There are a lot of good alt-ers (you probably even know a few) but if you’re really interested in learning you’ll want to make your own creations and not limit yourself to editing the work of others. So, where to begin?
Picking a program: A lot of the graphics type programs have the same features and look pretty similar, for the most part. You can pick any one of them and more-than-likely you’ll get accustomed to using it. Truly. You will. Humans are great that way (yeah, I’m laughing at you kitty. What yah gonna do?). But, you could also take a look at how a program’s laid out and pick the one that makes the most sense to you. If you find that a programs layout makes no sense, pick another. Also check that it works with your computer… because… that’s kind of important. Forget about all the stuff that a program can do and focus on its basic toolset. A program like Photoshop, while really nice, has more than any beginner will ever need for a while.
General free programs:
Gimp – sort of like a free photoshop. sort of . Can do animation, Also good for photos and painting.
Microsoft Paint – On every Windows PC already so you know it works. People complain about this one, but, it was my first program… and lots of awesome pixel art is still made using it. Very simple interface.
Paint.net – a better MSPaint or so I’ve heard. Simple interface.
Pixel art only free programs:
Aseprite – more for sprites, has animation
GrafX2 – supposed to look really retro… so might be confusing
Graphics Gale – has animation
ProMotion – has animation
Free Trial (and then not free at all):
Photoshop – good for lots of things: animation, video, painting, photography, and the list goes on for about 4 pages.
Starting out: I know you’re interested in Habbo but put that aside for a moment. Yes, I just said to forget Habbo (blasphemy)! Take some time to learn the basics and you’ll thank yourself later. Fundamental concepts (like: volume, color, proportion, perspective) inform everything you’ll ever make or want to make so understanding how and why they work will only benefit your growth. These concepts aren’t program or style specific either which is nice. The rules that define a sphere or cube are the same no matter how that object was made, even if it was on paper. After you’ve spent some time learning fundamentals you can use them for any kind of art you’re interested in too so that’s a nice little bonus. Find some tutorials on the magical learning device known as youtube and follow along. Not to pull out the classic “back in my day” spiel but you’re all really lucky to have such an immediate resource at your disposal so take advantage of it. Back in my day I had to learn by talking to rocks. Which, let me tell you. Is a pretty one way conversation.
Intermediate: When you’re comfortable with the fundamentals you can start with simple objects of your own. Try making a flatly shaded chair. Take some of the core volumes (sphere, cube, pyramid) and combine them in different more complex ways. Keep bumping up the complexity as you grow. You’ll find that most objects are essentially just different configurations of those core volumes. In fact, when we hire production artists we look more at their understanding of the foundational stuff and not so much the pixel art because it’s just a rendering style which is relatively easy to teach if the art foundation is already there. So, there’s that to ponder over.
Eventually you’ll get to stuff like grass and foliage which is more of a rendering style/texture applied to a core volume. Again, you’re stepping up the complexity by adding in a new skill. You’ll have to think about not only the volume of the whole (a big sphere) but also individual parts (single leaves). Move the light source around and see how that changes the way you render an object in. Change the light color.
Advanced: Pull it all together. Build objects with lots of different parts and textures. Build scenes that use multiple objects instead of single objects.
It might be time consuming and seem like a whole lot of work but if you’re serious about wanting to learn it you’ll have a lot of fun doing it. I hope you find that this sets you on the right path! Hmm. I don’t think I’ve rambled enough (Actually the following addition directly relates to the question above so I thought I’d answer it too :p)… B-B-B-B-B-BONUS QUESTION!
Are you partial to pixel art, or do you have other artistic interests as well? (Question posted by Wizhared)
Thanks Wizhared! I’m going to refocus the question off of me and direct it more at our entire team… if you don’t mind. You’ll find that every single (no joke) production artist we have creates other art on the side. Pixel art is great, and I’m sure all of our artists would agree with me (right everyone… e_e), but it’s just a small sliver of the art sphere. For a creative person it’s pretty natural to use different types of art to express oneself. We have artists that spend their time animating or doing character design, some are traditional painters, and others draw comics. Heck we even have a few musicians! Point is we look for artists that are well versed in a lot of different areas. Why? Well, all those types of art and styles give the artist a wide range of skills to rely on and confidence. It means they can go from being a fast concept artist to an exceptional animator in the blink of an eye. We’re a pretty fast paced team so confidence and a strong skill set is key. Before I ride off in to the sunset I’ll show you some of the teams sketches for the wild west campaign. I think it’s a pretty good example how the teams foundational knowledge from their other artistic ventures feeds back into their Habbo work (you can also see how, in the sketching phase, individual style is really apparent!).
We hope you enjoyed last weeks Habbo pixel art Q+A with notMiceElf because we’re continuing this week with another round! We’ve fueled the guy up on coffee and swedish fish (only the red ones) so we’re hoping to get another gloriously ramble-filled response. If you’ve got a question you’d like to pose keep an eye out for the poll in game and ask away! Ok, Q+A time, GO! GO! GO!
How do you begin to transform your vision into pixel art… where do you start first? (question posted by Unposted)
Another great question, thanks Unposted! You’ll be receiving a years supply of marshmallow peeps for your question… huh? Oh. We aren’t giving away peeps. Probably for the better because those things are pretty gross. Great question regardless. The process of taking the initial idea to final pixel art can vary a little between artists but we do give gold stars to those that stick to the “certified two step method of furni making”™. Ok that’s not really the name but the process does consist of two steps. And it is certified… ok fine it’s not certified! Sheesh. Lets just move on shall we?
Habbo artists royally freak out. No, just kidding. Step one starts with sketching out the idea for an item. We always start with sketches first because they’re typically faster to produce than a full set of pixel art furni but still give us the ability to look at what the full set might look like and make design decisions early on. This step can either be done on paper (and later scanned), or digitally. It’s really up to the artist and what they’re most comfortable with. The sketches are made so that they are around 2x-4x scale and can be easily utilized later in the process. This example from the mystics line is 2x.
After the sketches are completed all the artists get together and chat about the items and what they’ll do. At this point one or two of the artist’s color choices and/or design embellishments are selected to carry through the set (this could take us right back into the previous question about consistency! Or a discussion about obsessive compulsive artists…). The whole sketch step is really exploratory foundation laying and prep work for step two. The pixel part.
The aforementioned “pixel part” can be completed a few different ways but I’ll first go through the way I prefer our artists use and then briefly talk about the other methods. There’s not a wrong way here, just one that I believe works better for our finished products and timelines. Plus, I like to see our artists use the same method I use. Because ego.
Alright, with sketch in hand (on… the computer) the artist can start on the outlines which are like the bone structure of a furni. Yep. Furni has an exoskeleton. Really though, the outlines help give a kind of rigid structural support to furni so the meaty insides sit nicely and… I can hear Hannibal Lecter licking his lips… moving on. The sketch is often scaled to the correct furni size which is either to 50% or 25% if the sketch was at 2x or 4x scale. Once it’s been scaled the sketch can be set to a low opacity and outlines drawn over it on a new layer (we all use Photoshop).
Or the sketch is set off to the side and used only as reference as the outlines are drawn from scratch. You might be shouting at your screen, “Well, notMiceElf, that way sounds retarded! The sketching phase would be pointless if you’re just going to redraw it anyway!”, but I say to you very loud doubters, “nah”. The sketch is mostly a loose guide and redrawing gives us a very clean base to work from later. It also gives the artist a chance to fix oddities present the sketch, so that the design falls more in line with the “Habbo look”, and works better in game. The end result has a similarity to the sketch but can also be drastically different because of the correction process. Furni that has a lot of bits and trinkets (like a skull, book, and potion thing for example) benefits from being redrawn this way because each part can be drawn separately and then combined later for better control over the shape and readability of a design. Imagine if you drew a table top with loads of stuff on it all in one layer and then you realize you needed to make it longer. “Oh, SHhhhhaving cream!”, you’d say. But if you have everything as separate parts you just fix the underlying table part and move on. Easy as pie. No, cake. Eh, we’ll stick with pie.
The inner rendering for the furni is where the volume and color is added to flesh it out and give it more substance. Artists select a small set of colors ranging from dark to light which are used to render each element within a furni. This set of colors is called a color ramp and all those ramps together give us the overall palette. Pixel artists often employ a technique called “dithering” to bridge multiple colors in their ramp together when they’re dealing with a restricted palette (limited amount of color). Essentially dithering is a kind of pattern that makes the artwork appear to have more colors than it actually does. Lots of Habbo furni uses dithering to help render volumes but with newer items we tend to use dithering more for texture rather than bridging colors together. That’s not to say we use millions of colors per furni though. Furni is still rendered with a relatively small palette because it’s easier to keep track of what colors are used across a line if it’s a small number. But you might notice that we’ll opt for adding an extra color or two these days instead of jumping right into dithering.
Items get a final look-over and small edits are made before they’re sliced up (a topic for another time!) for use in the game, but essentially this is the full drawing process! We’ve reached the end of the amazingly wordy two step process. Phew. As I mentioned earlier though, the second step can be done a few different ways, so I’ll briefly lay out the alternatives for you to ponder. By the way (yes, I fully wrote that out instead of using an acronym), there are furni in the game that were made using both of these alternate methods. Can you guess which ones?
The first variation starts out the same way as before with scaling the sketched art to size. From there the artist takes the scaled sketch and uses it as is. The volumes get cleaned up until it’s all readable and the edges are fixed with black outlines. This method has a tendency to have random semi transparent pixels and often takes just as long to complete as fully redrawing so it’s not used all that frequently. In addition the sketch needs to be pretty much perfect for this method to work well so when it is used it’s often used on very simple non-animated items. You can see from my example that it will take a lot of cleaning up to reach the same level of cleanliness as the examples that used the preferred method. Interestingly though, this method is how we make the small size furni. Basically scale the big size, clean up, done!
The second variation is a little more extreme and it’s barely ever used in Habbo (but you’ll see it used in some NDS games as well as a few other console titles). It involves making the item in 3D and then exporting a render at size and cleaning it up *shudders*. The example image is pretty crude, but you get the idea. Definitely more work than is needed for most items we make but it’s a pretty neat process!
There’s a pretty interesting (and short) article from SNK about the 3D to 2D process used for the sprites in KOF XII which I fully recommend if you’re interested in that sort of thing. http://kofaniv.snkplaymore.co.jp/english/info/15th_anniv/2d_dot/creation/index.php
Well, that covers it! My swedish fish have stopped swimming around my blood stream as has the coffee so I’m calling this one done and done! I hope you all enjoyed the answer and the small glimpse into the furni production process! Catch you next week with another mind numbing and most likely overly longwinded Q+A!
Last week for the start of our Summer School Q+A we invited you all to ask one of our resident pixel pushers (that’s a pixel artist for those who didn’t know) anything you’ve ever wanted to know regarding the graphic side of Habbo and we’d force out an answer. Yes, even with red hot iron barbs if necessary and let us tell you, we were itching to use those barbs regardless (moody artsy people pffft, you know you have it coming). Before we delve into this first Q+A though we wanted to quickly give thanks to all of you for your great questions. So. Thanks!
Now. Lets get into that delving! Ah, we should warn you though… this answer is coming directly from the mind of one of those artsy people so we make no claim that it actually makes sense. Even less so considering it’s coming from notMiceElf. Good luck dear reader. Should you make it out consciously intact remember to submit a question of your own for the next round of the Q+A!
How do you go about designing furni so that it is consistent with other Habbo furni? (question posted by closetspace)
Hi closetspace and thanks for the question. Actually a pretty cool question if you delve into the historical side of things… which… could be “zzzzz” for some so for those who hate that sort of thing in essence what you’re asking about is the Habbo style and that’s really the tl;dr answer. So. Yep. Oh, you actually do want more? Well, grab some popcorn… this could get long winded.
The Habbo style is pretty rooted in isometric game art so the foundation for everything from furni to pets and avatars is going to be based around the rules for that kind of artwork. For example, check out this screenshot of an old isometric Batman game from the 80s. Sort of has a hint of Habbo in it doesn’t it?
Those basic isometric rules dictate the point of view for everything within the Habbo rooms. They’re really a kind of blue print which gives us a running start for keeping things consistent. From that starting point we delve into the specifics of the Habbo style which is actually the interesting bit.
I think you can look at the Habbo style as if it were divided into three stages. The first stage is made up of the original Habbo releases where the style was, in a lot of ways, in its infancy. It’s this stage that gave us the foundational rules for what everything going forward would look like. Items in this stage were much simpler. Inner edges (like those on legs of chairs or beds) were often black, most items generally lacked texture, and the colors were also fairly simple. It’s the kind of stuff, now, that I’d associate with someone who’s just learning the basics. Ok, don’t misunderstand and start yelling, “You’re dissing oldskool Habbo! FOR SHAME!”, at me. I’m just digging into the visual history to give a little context! PUT THE TORCHES AWAY.
As Habbo made more items the pixel prowess of its designers got better (as did our internal tools for making items… thank you dev) and we left stage one and entered stage two. There’s much better attention being payed to shape, volume and animation in this stage. You’ll notice that vertical banding on table tops becomes pretty common place in this stage and those inner edges are starting to get color instead of being black. Additionally the colors being selected are much more interesting from an artistic point of view which just adds to items looking like completed thoughts. This second stage, for me, is really in full swing by the time we released Alhambra and goes on for about two years or so.
Eventually Habbo switched platforms from shockwave to flash where stage three and the real “modern” style takes over (though admittedly there was some overlap between the second and third stages as we transitioned our tools). Stage three is characterized, in my mind, by items having more visual impact from better pixel artistry and attention to mood by way of color. The color ramps (that’s basically a kind of controlled gradient from one color to the next) for drawing are often a bit smoother and don’t seem as abrupt as those in stage one and the first half stage two which adds to items looking a little more 3D and complex. Items also get a lot more texture and transparency effects (stuff that wasn’t possible before. For example: water patches would never have been able to be made in stage one or two).
It’s a little more apparent if you look at how the rendering of one type of furni has changed throughout each stage. Like. A bed. Don’t look at theme so much but how the items are drawn. The types of textures and complexities given to them. It’s a pretty cool transition.
Alright. I can tell your eyes are getting droopy and your popcorn has run out which means it’s either time for me to stop with the history or plant some kind of subliminal message. What we get from all this history though is that the Habbo style is something that’s been in a constant state of change because of individual artists and the platform Habbo was developed for changing. There’s a core set of “rules” that were formed as we traveled those style stages to this point that we now follow. A few of those rules for example are: black outlines, light goes top left to lower right (this is an odd one… maybe someone will ask about Habbo light sometime), vertical bands for top sheen, small items being slightly larger than real life, ducks are funny.
To a certain degree that long slow change in style and the sheer volume of items (seriously, we have a ton of items) gives us a lot of leeway in keeping things appearing consistent without needing to redraw everything every few years (yeah, I’m looking at you original Area, Iced and Plastic). In a way it’s like having a bunch of red crayons of slightly varying shades. Chances are that any new red crayon will fit somewhere in the bunch and look like it belongs. That is, as long as we follow our style rules of course- ie: make a red crayon not a blue one.
So that’s the long way around the Habbo style reason. But there’s actually a little more to it than “just follow the rules” (see they let me out of my cage, I’ll ramble for as long as I possibly can before I’m pulled back in). That long history of items I mentioned before also means that, more than likely, we’ve already made something similar and we can go look to it for reference. The trick there is to copy only what’s needed so items still look fresh. Sometimes you’ll see that we take outlines or bits of previous furni and tie it into new furni. It’s an elegant way to ensure a kind of shared visual communication goes on between furni from past and present (helps keep our crayons red as it were).
So there ya have it. Our overall Habbo Style and incorporating shared elements between new and old items help keep things looking cohesive. There’s a whole separate topic concerning keeping items within a line cohesive too but I think I’ve probably bored you enough already :p Plus I can hear the chains rattling which means it’s time for me to be put back in my art cage. I hope you’ve found the answer as interesting as I do!