Creative Corner
Share your own art and stories, or ask for critique.
TOPIC | {Shyads' Graphics} Pixels & Pride
1 2 3 4
[center][size=6][u][b]Help Centre[/b][/u][/size][/center] Here I have some tips for those new to digital art programs, image editing, image animating and uploading pictures online in general; stuff I wish I'd been told when I started playing neopets some odd years ago! [quote][center][b][u]Menu[/u][/b] [url=http://www1.flightrising.com/forums/cc/2201207/2#post_31690280]Hotlinking Explained/How To Upload Images[/url] [url=http://www1.flightrising.com/forums/cc/2201207/2#post_31690281]Simple Animating Guide[/url][/center][/quote]
Help Centre

Here I have some tips for those new to digital art programs, image editing, image animating and uploading pictures online in general; stuff I wish I'd been told when I started playing neopets some odd years ago!
tumblr_inline_p1591eMPrN1tc3swm_540.gif Shyads, He/They
Dragons with Art
Free to use Graphics
joTRWu9.gif
[size=6][u]Image Uploading[/u][/size] [b]What is it?[/b] To put a picture on the internet, you need something that will take a copy of your file and save it online; you need an image hosting website. You [u]cannot[/u] copy and paste the picture onto your browser, nor can you use the url you get when you right click and choose to open the image with your browser, like this [img]https://78.media.tumblr.com/1d3a5e2595eebfabfdf097138c7a1a50/tumblr_p17y48SrBH1wlqj6ro1_1280.png[/img] Image hosting sites provide your pictures a place online that you can link back to. Once you have uploaded the image to one, you can use the generated url to post it anywhere that allows you to do so (like flightrising, for example) This is called [u]hotlinking[/u], it's sort of like making a window, in a way. For example, I host my images on deviantart, and when I post an image here, it's like making a window to view the image on deviantart [i]through[/i] flight rising. If I delete the picture's link on flightrising, that window closes and the picture is gone from here, but still exists on my deviantart. BUT, if I delete the image from deviantart itself, the window to that image is still here on flightrising, but will display a broken link, if that makes sense! [b]How to do it?[/b] Every site is different, so I can't really walk you through every one of them. The good news? They're very user-friendly, and you will often see an upload button directly on the front page. Follow the site's instructions and they will give you links to copy and paste for all kinds of websites The best news? it's usually just a two-step process: upload image, receive url Some websites even give you the option to re-size things as you upload them, very handy if you don't have good image editing software [quote] [u]Websites I recommend[/u]: Imgur, Postimage, Deviantart stash, Tumblr* [u]Sites you don't need an account for**[/u]: Imgur, Postimage [u]Sites that aren't favourable:[/u] Photobucket, Furaffinity (hotlinked images don't seem to display at all)[/quote] *while it has the image hosting ability, tumblr is a blogging platform, not just an image hosting site **making an account makes it easier to find your pictures, and give them a more permanent place to stay. Some websites delete old files not tied to an account after a few years or less. If you are only looking to host an image for a short while, these work just fine Most artists are fine with, or even encourage you re-hosting an image they make for you, so that you ensure the image stays up yourself, but please, [u]always ask before you do so![/u] Maybe they won't want their picture on a specific website, it's always better to ask and make sure of things before you act. It's also a good idea to ask, if the artist hasn't already specified, how they wish to be credited where you upload the file! [b][u]It's also highly recommended that you at least save the images you use/commission to your own personal computer folder[/u][/b], and include the artists name/number in the file name so that you can easily find them again should the original hosted image file be deleted
Image Uploading

What is it?

To put a picture on the internet, you need something that will take a copy of your file and save it online; you need an image hosting website.

You cannot copy and paste the picture onto your browser, nor can you use the url you get when you right click and choose to open the image with your browser, like this

tumblr_p17y48SrBH1wlqj6ro1_1280.png

Image hosting sites provide your pictures a place online that you can link back to. Once you have uploaded the image to one, you can use the generated url to post it anywhere that allows you to do so (like flightrising, for example)

This is called hotlinking, it's sort of like making a window, in a way. For example, I host my images on deviantart, and when I post an image here, it's like making a window to view the image on deviantart through flight rising. If I delete the picture's link on flightrising, that window closes and the picture is gone from here, but still exists on my deviantart. BUT, if I delete the image from deviantart itself, the window to that image is still here on flightrising, but will display a broken link, if that makes sense!

How to do it?

Every site is different, so I can't really walk you through every one of them. The good news? They're very user-friendly, and you will often see an upload button directly on the front page. Follow the site's instructions and they will give you links to copy and paste for all kinds of websites

The best news? it's usually just a two-step process: upload image, receive url

Some websites even give you the option to re-size things as you upload them, very handy if you don't have good image editing software
Quote:
Websites I recommend: Imgur, Postimage, Deviantart stash, Tumblr*

Sites you don't need an account for**: Imgur, Postimage

Sites that aren't favourable: Photobucket, Furaffinity (hotlinked images don't seem to display at all)

*while it has the image hosting ability, tumblr is a blogging platform, not just an image hosting site

**making an account makes it easier to find your pictures, and give them a more permanent place to stay. Some websites delete old files not tied to an account after a few years or less. If you are only looking to host an image for a short while, these work just fine

Most artists are fine with, or even encourage you re-hosting an image they make for you, so that you ensure the image stays up yourself, but please, always ask before you do so! Maybe they won't want their picture on a specific website, it's always better to ask and make sure of things before you act. It's also a good idea to ask, if the artist hasn't already specified, how they wish to be credited where you upload the file!

It's also highly recommended that you at least save the images you use/commission to your own personal computer folder, and include the artists name/number in the file name so that you can easily find them again should the original hosted image file be deleted
tumblr_inline_p1591eMPrN1tc3swm_540.gif Shyads, He/They
Dragons with Art
Free to use Graphics
joTRWu9.gif
[center][size=6][u]Simple Animating Guide[/u][/size][/center] If you're wondering how I make my little pixel dragons move, hopefully I can help you out here! Many art programs have the capability to create gifs, but maybe yours doesnt. If you've searched around and haven't found a guide for the software you use, fear not, you can still make simple little animations online To start, you need the frames of your animation. Draw different poses, then save each as a separate image If you're using MSpaint, or another program that wont allow image transparency, but you want a transparent background, pick a colour that is [b]different[/b] from all the ones you used to colour your sprite, and use it to colour in the [b]background[/b]. The sharper contrast, the better (ex: if you used a lot of blues, use something like red, instead of another shade of blue) If it hurts your eyes to look at, this is a good sign! I will show you how to make it transparent at the end [img]https://78.media.tumblr.com/9f3fb1e46066edb03beea681efbcf647/tumblr_inline_p3yu1jPraA1tc3swm_540.png[/img] I picked mainly dark colours for my sprite, so I picked bright cyan for the background Now you're ready to animate it! [size=5][u]Making the image move[/u][/size] [b]Step 1:[/b] Go to this website called [url=http://www.ezimba.com/]ezimba[/url] You can see there's a LOT of functions to can play around with, but what you'll need for your animation is '[u]frame animation[/u]', in the third column, under '[u]mix[/u]' [img]https://78.media.tumblr.com/435a4022632d9905ece6c0fca33746bf/tumblr_inline_p3ytmfkzRL1tc3swm_540.png[/img] ----- ----- [b]Step 2:[/b] Upload your frames Click the little orange buttons, upload each frame in the order they would appear [img]https://78.media.tumblr.com/03b11ffba80b0acecf5bf450f85581fe/tumblr_inline_p3ytmclYSl1tc3swm_540.png[/img] ----- ----- [b]Step 3:[/b] Animation settings Scroll to the bottom of the page, you'll see the option to set the speed, how many times the gif will loop, and a way to resize the gif. The other options are pretty self-explanatory, but for speed, 3 seconds is the slowest, and 1/10 second is the fastest. These are the settings I like to use: [img]https://78.media.tumblr.com/68c6022601b81234727e674ba853df04/tumblr_inline_p3ytmccX1R1tc3swm_540.png[/img] Click the '[u]convert[/u]' button, and scroll to the top of the page. If you followed these instructions, you should see your dragon moving in the preview! It will be much bigger than it actually is, but unless you ticked the resize option, you're fine. You can double check this by clicking the little '[u]view full image[/u]' link at the top of the page. If you want to make your background transparent, continue to step 4, otherwise, skip down to step 5 ----- ----- [b]Step 4:[/b] Making a transparent background Click the '[u]return to main index page[/u]' link, you'll be back where your started but with your moving image above. In the last column, under '[u]create[/u]', select the '[u]transparent[/u]' link [img]https://78.media.tumblr.com/c794e98525e48e65f148cb09d727222c/tumblr_inline_p3yv8zeXv01tc3swm_540.png[/img] You'll be presented with this screen: [img]https://78.media.tumblr.com/143b81df619bd19fe461e8c8dbb36bcc/tumblr_inline_p3ytme4xAs1tc3swm_540.png[/img] Click on the background colour to select that colour, you'll see it fill in automatically, like the cyan is in my screen above The '[u]approximate colour fuzz[/u]' option is handy if you want to get rid of colours that are more similar, but if you've followed my guide and made your background contrast the image, 1% should do just fine. Click '[u]convert[/u]' and viola! Your preview should have a transparent background (it will appear white) ----- ----- [b]Step 5:[/b] Saving the image Click the '[u]save this image[/u]' link above your gif, it should automatically download to your computer, into its downloads folder [img]https://78.media.tumblr.com/5b468b230037558799a4b010774353dd/tumblr_inline_p3yvpvdklW1tc3swm_540.png[/img] From the downloads folder, you can move it elsewhere and rename it, but the default file name will be 'ezimba' With that, you're done; upload your image and show off your little dancing dragon! If you're not sure how to do that, I've made another tutorial explaining what hotlinking is, and how to upload images above. Happy arting c: [center][img]https://78.media.tumblr.com/3e75c39127903614d87ca04a2375d88e/tumblr_inline_p3ytn7xjwP1tc3swm_540.gif[/img][/center]
Simple Animating Guide

If you're wondering how I make my little pixel dragons move, hopefully I can help you out here! Many art programs have the capability to create gifs, but maybe yours doesnt. If you've searched around and haven't found a guide for the software you use, fear not, you can still make simple little animations online

To start, you need the frames of your animation. Draw different poses, then save each as a separate image

If you're using MSpaint, or another program that wont allow image transparency, but you want a transparent background, pick a colour that is different from all the ones you used to colour your sprite, and use it to colour in the background. The sharper contrast, the better (ex: if you used a lot of blues, use something like red, instead of another shade of blue)

If it hurts your eyes to look at, this is a good sign! I will show you how to make it transparent at the end

tumblr_inline_p3yu1jPraA1tc3swm_540.png

I picked mainly dark colours for my sprite, so I picked bright cyan for the background

Now you're ready to animate it!

Making the image move

Step 1: Go to this website called ezimba

You can see there's a LOT of functions to can play around with, but what you'll need for your animation is 'frame animation', in the third column, under 'mix'
tumblr_inline_p3ytmfkzRL1tc3swm_540.png


Step 2: Upload your frames

Click the little orange buttons, upload each frame in the order they would appear
tumblr_inline_p3ytmclYSl1tc3swm_540.png


Step 3: Animation settings

Scroll to the bottom of the page, you'll see the option to set the speed, how many times the gif will loop, and a way to resize the gif. The other options are pretty self-explanatory, but for speed, 3 seconds is the slowest, and 1/10 second is the fastest. These are the settings I like to use:

tumblr_inline_p3ytmccX1R1tc3swm_540.png

Click the 'convert' button, and scroll to the top of the page. If you followed these instructions, you should see your dragon moving in the preview! It will be much bigger than it actually is, but unless you ticked the resize option, you're fine. You can double check this by clicking the little 'view full image' link at the top of the page.

If you want to make your background transparent, continue to step 4, otherwise, skip down to step 5


Step 4: Making a transparent background

Click the 'return to main index page' link, you'll be back where your started but with your moving image above.

In the last column, under 'create', select the 'transparent' link
tumblr_inline_p3yv8zeXv01tc3swm_540.png

You'll be presented with this screen:

tumblr_inline_p3ytme4xAs1tc3swm_540.png

Click on the background colour to select that colour, you'll see it fill in automatically, like the cyan is in my screen above

The 'approximate colour fuzz' option is handy if you want to get rid of colours that are more similar, but if you've followed my guide and made your background contrast the image, 1% should do just fine.

Click 'convert' and viola! Your preview should have a transparent background (it will appear white)



Step 5: Saving the image

Click the 'save this image' link above your gif, it should automatically download to your computer, into its downloads folder

tumblr_inline_p3yvpvdklW1tc3swm_540.png

From the downloads folder, you can move it elsewhere and rename it, but the default file name will be 'ezimba'

With that, you're done; upload your image and show off your little dancing dragon!

If you're not sure how to do that, I've made another tutorial explaining what hotlinking is, and how to upload images above. Happy arting c:
tumblr_inline_p3ytn7xjwP1tc3swm_540.gif
tumblr_inline_p1591eMPrN1tc3swm_540.gif Shyads, He/They
Dragons with Art
Free to use Graphics
joTRWu9.gif
(reserved)
(reserved)
tumblr_inline_p1591eMPrN1tc3swm_540.gif Shyads, He/They
Dragons with Art
Free to use Graphics
joTRWu9.gif
(reserved)
(reserved)
tumblr_inline_p1591eMPrN1tc3swm_540.gif Shyads, He/They
Dragons with Art
Free to use Graphics
joTRWu9.gif
(reserved)
(reserved)
tumblr_inline_p1591eMPrN1tc3swm_540.gif Shyads, He/They
Dragons with Art
Free to use Graphics
joTRWu9.gif
(reserved)
(reserved)
tumblr_inline_p1591eMPrN1tc3swm_540.gif Shyads, He/They
Dragons with Art
Free to use Graphics
joTRWu9.gif
(reserved)
(reserved)
tumblr_inline_p1591eMPrN1tc3swm_540.gif Shyads, He/They
Dragons with Art
Free to use Graphics
joTRWu9.gif
(reserved)
(reserved)
tumblr_inline_p1591eMPrN1tc3swm_540.gif Shyads, He/They
Dragons with Art
Free to use Graphics
joTRWu9.gif
(reserved)

im paranoid and want to give myself lots of room for error sorry lol
(reserved)

im paranoid and want to give myself lots of room for error sorry lol
tumblr_inline_p1591eMPrN1tc3swm_540.gif Shyads, He/They
Dragons with Art
Free to use Graphics
joTRWu9.gif
1 2 3 4