Webkinz Insider - Not affiliated with Ganz or Webkinz.

Welcome to WI!


Free Webkinz Codes

Ads  Remove Ads

Become an Insider Insider Subscriber and make these ads go away!
Go Back   Webkinz Insider Forum > WebkinzInsider.Com > Somebody Help! > Guides & How-tos

Welcome to the Webkinz Insider Forum forums.

You are currently viewing our boards as a guest which gives limits your access to many of our other features. By joining our FREE community you will have access to post topics, communicate privately with other members (PM), removal of some (including the "in-text") ads, respond to polls, upload content and access many other special features, such as trading, and entering contests! Registration is fast, simple and absolutely free so please, join our community today!

If you have any problems with the registration process or your account login, please contact us.
Closed
 
LinkBack Thread Tools Display Modes
Old 07-08-2011, 07:59 PM   #1
noomch
Webkinz :)
 
mentos's Avatar
mentos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledge

Default MOVING BACKGROUND AVATARS!

this is a guide on how to make moving-background avatars, like those:

Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.

there are three guides here: my original guite for photoshop cs5, a guide i added for lunapic, and starbucksfun's guide for gimp
. first steps are the same for all of them:

first, you have to choose a moving background, and save it on your computer.
all backgrounds to choose from are on the next posts. you can use the black and white base and re-color it if you know how to, or you can use a pre-colored one. they are all made by me, and you're free to use them, re-color them, change their direction and speed ans so on, as long as you don't claim their you're own .

next, you have to choose a webkinz image. there are plenty in here:
http://www.webkinzinsider.com/wiki/(Picture_Gallery)_Pet_Special_Foods_%26_Pet_Specific_Items
choose a webkinz (or any other picture with transparent background), and save it on your computer.


-----------------------------------------------------------

photoshop cs5 tutorial:

open photoshop cs5, and open up the background image. if the animation panel isn't already open, open it by choosing Window -> Animation. make sure you're working in frames mode. if you're in the timeline mode, just click the button on the right bottom corner of the animation panel. you should now see all the frames of the background animation both in the animation panel and in the layers window (each frame is a separate layer).

next, open your webkinz image. select everything (ctrl+A) and copy it (ctrl+C), then go back to your background image and paste it as a new layer (ctrl+V).

move the new layer above all the other layers. place it in the middle using the move tool (the first tool in the tools panel). you can make it a little smaller if you like - hit ctrl+T to get into free transform mode, scale the webkinz, and hit enter when you're finished, so you get out of free transform mode.

your image should look something like this:

Click the image to open in full size.

adding an outer glow to the webkinz makes the blending more smooth. right click the webkinz layer, and choose "blending options". check "outer glow" and choose those parameters:
Spoiler: show

Click the image to open in full size.

you don't have to use exactly those parameters... those are just parameters that makes it look nice, to my opinion.

when you're finished click ok so that your image will look something like this:

Click the image to open in full size.

now you can add text above your image, a border, or any other decorations - if you know how to.

then, select all the layers you've added - meaning, all layers except of the animation frames. if you haven't added any text or so, it's just the webkinz layer.
then click the upper right corner in the animation panel, and choose "match layer across frames". you'll get a little dialog, check all options and hit ok.

make sure on the left bottom corner of the animation panel, it says "forever" - meaning your animation will play forever. if it says "once", change it to "forever".

now your animation should be ready. you can click the play button in the animation panel if you want to test it.

to save your animation as a gif, choose File -> save for web & devices. make sure you select GIF. then play around with the options until your image is small enough (it has to be less that 50kb to be an avatar on wi), and hit save

that's it - you're done!

Click the image to open in full size.

if you have any questions, if something didn't work, or you need any help - please ask and i'll be glad to help.
also, if you made an avatar, please post to show us what you did!

good luck - hope the guide helped you

-----------------------------------------------------------

lunapic tutorial:

  1. go to lunapic.com
  2. upload your webkinz image.
  3. copy it to the clipboard (edit -> copy image to clipboard)
  4. upload the background image.
  5. paste the webkinz on the background (edit -> paste image from clipboard)
  6. add text (draw -> text tool).
  7. add a border (draw -> border tool)
  8. set the frame timing to be fast - about 7 for each frame (animation -> frame timing). it could vary a little between different background types.
  9. save the image as optimized gif.
  10. if it's too big, and it will probably be too big, use this site to optimize more: Online Image Optimizer: Optimize your GIFS, JPGS, and PNGS online.
example result - using only lunapic:
Click the image to open in full size.


-----------------------------------------------------------

gimp tutorial - by starbucksfun:

Step 1:
Open up the animated background and the webkinz. Copy the webkinz image, and paste it on you animated background. If the webkinz comes out a different color then it supposed to be, go Image > Mode > RGB.

Step 2:
Resize the webkinz with the scale tool. Make sure you keep aspect.
Then use the move tool and move the webkinz to where you want on the avatar.

Step 3:
Open a new transparent layer Layers > New Layer > Fill with transparency and
Open up your layers menu (Control + L).
Right click the webkinz layer and click Alpha to Selection.
Select > Grow > Choose any pixel size
Then use the Bucket Fill Tool and fill you transparent layer with white (#ffffff)
Select > None
Filters > Blur > Gaussian Blur (set the radius to 5)
Drag the glow behind the pet on the layers menu and right click the webkinz and merge it down.

Step 4:

Add text, with the text tool.
It can be just the text or you can choose one of the optional Gaussian Blur Text or Bordered Text that are typed up at the end. Make sure you merge the text to the webkinz before duplicating it and adding it to each layer

Step 5:
So you have it all together, or you can add a border (Listed in optional steps)
Filters > Animation > Optimize (for GIF)
Then File > Save as
Namegoeshere.GIF
Save as an animation and there’s your avatar!(:


Optional Steps:

Recoloring Background:
1.Open a new transparent layer.
2.Fill with color you want.
3.Set layer mode to color.
4.Duplicate the filled in color layer and merge it down on each layer.

Gaussian Blur Text:
1. Set up your text.
2. Duplicate text, make it below original text, and change color.
3. Layer > Layer to image size
4.Filters > Blur > Gaussian Blur
5. Duplicate the Gaussian Blur layer to get it to stand out more if wanted.
6. Merge those all together
Add the text to each layer, by duplicating and merging down

Bordered Text:
Put out your text
Right click the text on the layers menu and make it alpha to selection
Layer > New Layer > Fill with transparency
Select > Grow > Choose what ever pixel size
Use the Bucket Fill Tool and fill in the transparent layer with

Changing Animation Speed:
Open Layers Menu (Control + L)
Change the Number where it says (##ms) in the title.
Lower numbers make the animation go faster and higher numbers for slower animation.

Bordering the Image:
Filters > Decor > Add Border


Last edited by mentos; 07-09-2011 at 04:55 PM..
mentos is offline Female
Sponsored Links
Old 07-08-2011, 08:00 PM   #2
noomch
Webkinz :)
 
mentos's Avatar
mentos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledge

Default Re: MOVING BACKGROUND AVATARS!

backgrounds:
Spoiler: show


Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.

Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.

Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.

Click the image to open in full size. Click the image to open in full size.



mentos is offline Female
Old 07-08-2011, 08:01 PM   #3
noomch
Webkinz :)
 
mentos's Avatar
mentos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledge

Default Re: MOVING BACKGROUND AVATARS!


backgrounds: i see everyone liked those the best, so i've added some more colors -
Spoiler: show


Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.

Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.

Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.

Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.

Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.




Last edited by mentos; 07-09-2011 at 11:30 AM..
mentos is offline Female
Old 07-08-2011, 08:01 PM   #4
noomch
Webkinz :)
 
mentos's Avatar
mentos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledge

Default Re: MOVING BACKGROUND AVATARS!


backgrounds:
Spoiler: show


Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.

Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.

Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.

Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.

mentos is offline Female
Old 07-08-2011, 08:54 PM   #5
noomch
Webkinz :)
 
mentos's Avatar
mentos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledge

Default Re: MOVING BACKGROUND AVATARS!

backgrounds:
Spoiler: show


Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.

Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.

Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.

Click the image to open in full size. Click the image to open in full size.



Last edited by mentos; 07-08-2011 at 08:54 PM..
mentos is offline Female
Old 07-08-2011, 08:58 PM   #6
Babs1978
 
Babs's Avatar
Babs is a saintly comradeBabs is a saintly comradeBabs is a saintly comradeBabs is a saintly comrade
Babs is a saintly comradeBabs is a saintly comradeBabs is a saintly comradeBabs is a saintly comradeBabs is a saintly comrade

Default Re: MOVING BACKGROUND AVATARS!

Would this work in photo shop 5? It's been a long time since I did anything with graphics. thanks
Babs is offline Female
Old 07-08-2011, 08:59 PM   #7
noomch
Webkinz :)
 
mentos's Avatar
mentos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledgementos flows towards the sea of knowledge

Default Re: MOVING BACKGROUND AVATARS!

View Post Originally Posted by babs
Would this work in photo shop 5? It's been a long time since I did anything with graphics. thanks
you mean 5, before the first CS? i really don't know, i never used it. i suppose many things have changed since then.. maybe if you know it good you could do the same things in a different way.

Last edited by mentos; 07-08-2011 at 09:03 PM.. Reason: ugh! sorry for editing again and again. it wouldn't let me add another post and.... well never mind! :-)
mentos is offline Female
Old 07-08-2011, 09:02 PM   #8
Webkinz :)
 
Priceless's Avatar
Priceless has disabled reputation

Default Re: MOVING BACKGROUND AVATARS!

Great guide! EDIT: Here is my graphic. Hope you like!
Click the image to open in full size.

Last edited by Priceless; 07-08-2011 at 09:16 PM..
Priceless is offline Male
Old 07-08-2011, 09:08 PM   #9
Babs1978
 
Babs's Avatar
Babs is a saintly comradeBabs is a saintly comradeBabs is a saintly comradeBabs is a saintly comrade
Babs is a saintly comradeBabs is a saintly comradeBabs is a saintly comradeBabs is a saintly comradeBabs is a saintly comrade

Default Re: MOVING BACKGROUND AVATARS!

View Post Originally Posted by mentos
you mean 5, before the first CS? i really don't know, i never used it. i suppose many things have changed since then.. maybe if you know it good you could do the same things in a different way.
Thanks, I guess I will have to look. Your backgrounds are really cool. I love to all the stuff everyone can do with the graphic. I wish I had more time to experiment with them myself. Maybe I some point I will have the time.
Babs is offline Female
Old 07-08-2011, 09:17 PM   #10
band guys are so
Gifted
 
Emma8432's Avatar
Emma8432 has lots of talentEmma8432 has lots of talentEmma8432 has lots of talentEmma8432 has lots of talentEmma8432 has lots of talentEmma8432 has lots of talentEmma8432 has lots of talentEmma8432 has lots of talentEmma8432 has lots of talentEmma8432 has lots of talentEmma8432 has lots of talentEmma8432 has lots of talentEmma8432 has lots of talentEmma8432 has lots of talentEmma8432 has lots of talent

Default Re: MOVING BACKGROUND AVATARS!

These are so amazing! <3
I just wish I knew how to do them with GIMP.
Emma8432 is offline Female
Closed

Tags
cyclops o•), god is 100% awesome

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are On



All times are GMT -5. The time now is 12:27 AM.



Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2016, vBulletin Solutions, Inc.
SEO by vBSEO ©2011, Crawlability, Inc.
Copyright © 2007-2013 Kopi Enterprises, LLC
WebkinzInsider.Com is not an official site of, sponsored by, nor affiliated with Ganz, Inc, Webkinz, Lil'Kinz, or Kinzville Newz and all character names, logos, and images are trademarks owned by Ganz, Inc.
no new posts