Skins and Accents

Oszs wrote on 2013-07-10 13:35:25:

117

July 10, 2013 13:27:35

Since a lot of people seem to have trouble with either resizing or correctly uploading their skins (especially during a contest! ) I though I'd post a few tipps for those topics, to help people who want to participate in a contest or sell/trade their custom skins. I will go over multiple drawing programs and image hosting sites, as well as explain how to get the image from your deviantArt/furaffinity/whatever art site you're using into your post.

Resizing

Photoshop

The version I am using is Photoshop CS3, but this is pretty much the same in every Photoshop version. I will also add PS Elements screenshots. The PS I am using is in german, so I added the translations for the important parts.

So you've finished drawing you awesome skin and want to upload it, but need to resize it. Here's how it works in Photoshop ( and it's really really simple):

1. Click on Image, then Image Size ( or simply press Alt+Ctrl+I )

Photoshop CS3

Photoshop Elements 7

2. Enter the new Image Size, make sure it's set to pixels (standard setting). For the skins this would be 350x350 px . This one looks the same in CS and Elements.

Tipp from Oszs:

In PhotoShop Elements you can't resize your image unless your check the 'Resample Image' box in the Image Resize menu. Hope that's useful, it had me hung up for a while.

And that's it! Now make sure to save this as a .png file ( File-> Save As -> Choose .png in the dropdown menu on the bottom)

GIMP

1. Click on Image, then Image Size

I am using an older GIMP version, so the option might be at another position in the menu, just look for the right icon!

2. Enter the desired size (350x350px), make sure the chain item is a complete chain so that the proportions are right. Then simply click Resize!

Now save your image as a .png, by clicking on File -> Export and changing the file ending to .png

Paint Tool SAI

1. Go to Canvas and click on Change Resolution ( not size! )

2. Enter the new image size (350x350px), make sure the Constrain Proportions box is checked

Now just save the image as a .png file ( File -> Export -> .png )

Online Resizing

If you already have a finished .png file, but it's not yet resized yet and you don't have access to a drawing program at that time, you can also resize your image online.

A good website for this is this one . I will show you what is important for correctly resizing your picture. In order for this to work, you must already have a .png file.

1. Upload your .png image

2. Choose the following options:

Width: 350 , Height: 350
Smoothly Interpolation: Check
Quality: Without Compression

Then simply click go and when asked, choose "Save File" (just like any other download).

Another website is this one, it's fairly easy to use

1. Upload your .png image and click on "Continue"

2. Scroll down to the "Resize Your Picture" Option, choose the following:

Dropdown menu: "Custom Size..." - > Width 350px, Height 350px
"Choose Special Effects" -> None
"Save As..." -> .PNG

I will go over correctly uploading your image in the next part of this thread.

I hope it's okay that I made this, I just wanted it to be a bit easier for people who want to enter contests but do not know how to resize/upload, since this seems to be quite a problem!

Last edited on Jul 30, 2013 02:42:22 by Saer

[center][b]Uploading[/b][/center] There are a multitude of free websites that can be used for hosting your image, so I'll just go over the ones used most. [center] [url=http://imgur.com/][img]https://dl.dropboxusercontent.com/u/18742411/FlightRising/imgur132.jpg[/img][/url] [/center] On Imgur, you can upload images without creating an account, or create one if you want to. 1. To upload your image, simply click on "Computer" on the right side to upload a file from your harddrive. Select the image. Once you selected it, you will be taken to a window where you can choose to upload more images from your pc by pasting them, draggin them there or simply selecting them from your harddrive again. Then simply click "Upload". [img]https://dl.dropboxusercontent.com/u/18742411/FlightRising/imgur.jpg[/img] 2. Once your image has been uploaded, you can either grab the direct link from the box on the right or a ready-to-use code for the forum that you can simply copy and paste. [img]https://dl.dropboxusercontent.com/u/18742411/FlightRising/imgur2.jpg[/img] [center] [img]https://dl.dropboxusercontent.com/u/18742411/FlightRising/IS.jpg[/img] [url=http://imageshack.us/]Imageshack[/url][/center] On ImageShack, but you do not need to! You can either log in with facebook or create an account, where you will need to enter your e-mail, gender and birthdate. 1. To upload an image, click on the Browse button and choose your file. You also have the option to change the size of your image, but I do not really recommend this for resizing your image, so choose the "Do Not Resize" option from the dropdown menu. Once you selected your file(s), simply hit the "Upload" button. 2. Click on "Continue To The Image Links" 3. Here again you will have the choice to get either the direct link or a ready-to-use code. Just click on one of the fields to automatically select the link/code and then copy it! If you don't know how to insert an image into your post, I suggest using the already finished code that is in the field labeled "IForum-Code" . If you do not have an account, the "Direct Link" field will be unaccesible, but you can still use the "Forum-Code" to get the ready-to-use code. This will however come with a "Uploaded with Imageshack" link underneath the picture, but will not influence the picture itself. [center] [img]https://dl.dropboxusercontent.com/u/18742411/FlightRising/14.jpg[/img][/center] [center] [img]https://dl.dropboxusercontent.com/u/18742411/FlightRising/DB.jpg[/img] [url=dropbox.com]Dropbox[/url] [/center] I recommend Dropbox only if you plan to upload a lot of images, since setting it up is a bit more complicated. Dropbox requires you to create an account, but provides more privacy than Imageshack or Photobucket, where everyone can just browse all of your pictures. On Dropbox, you can select which pictures will be public and people cannot browse all of your pictures. You can also create various folders to organize your images, for examply create a folder for each breed you made a skin for. For creating an account, you need to provide a name and your e-mail adress. Once you create an account, you will be able to download the desktop version of dropbox, but I will only go over the browser version now. You will also need to confirm your e-mail adress. You can then either take the tour or just click on the dropbox icon to start uploading your files. Since new users do not directly get a "Public Folder" anymore, you need to enable it first by going here: [url]https://www.dropbox.com/enable_public_folder[/url] and clicking on "Enable Public Folder". This will also directly take you to your public folder! 1. In your public folder, click on "Upload" (to the left of the Search Field) to upload your file(s). [center][img]https://dl.dropboxusercontent.com/u/18742411/FlightRising/15.jpg[/img][/center] 2. Wait for your file to finish loading, then click "Done" on the upload window to close it. Now right-click onto your image and select "Copy Public Link". [center][img]https://dl.dropboxusercontent.com/u/18742411/FlightRising/16.jpg[/img] [/center] 3. This will open a window where you can copy the Direct Link of your image. Use this to insert it into your post via the "Insert Image" button on the FlightRising forum (the little tree icon above the text field) [center][img]https://dl.dropboxusercontent.com/u/18742411/FlightRising/18.jpg[/img][/center] [center] [img]https://dl.dropboxusercontent.com/u/18742411/FlightRising/art.jpg[/img] deviantArt, furaffinity and other art websites [/center] If you already have an account on one of these websites, you might want to directly grab your images from over there without having to upload them again on a seperate site. This is fairly easy, you just need the direct image link. I will show you on the example of deviantart how to get to it. Really, it's simple. (Just remember that these sites are in maintenance mode from time to time (just like flightrising) and that your image will be unavailable during that time) 1. Upload your image to the art website of your choice. (For furaffinity: Remember that there are sometimes problems with displaying the transparency on furaffinity! ). I'm asuming you already know how to do that. 2. Go to your image and right-click onto the image. Depending on your browser you will have different options: [b]Firefox:[/b] [img]https://dl.dropboxusercontent.com/u/18742411/FlightRising/firefox.jpg[/img] [b]Safari:[/b] [img]https://dl.dropboxusercontent.com/u/18742411/FlightRising/safari.jpg[/img] [b]Opera:[/b] [img]https://dl.dropboxusercontent.com/u/18742411/FlightRising/opera.jpg[/img] Interestingly this method did not work for me when I tried it with Internet Explorer, since the option was not choosable.... 3. Once you got the direct link, just copy it and insert the image into your post on the flightrising forum by clicking the "Insert Image" button (the little tree above the text field) and copy the image link into the pop-up. That's it! If you have any suggestions, tipps or questions or need specific help with uploading/resizing your image don't hesitate send me a message or reply to this thread! I will add all helpful tipps that have not been covered yet into my posts as quotes. Also, if you find a typo, feel free to tell me so and I will fix it, english is not my native language. I hope you have enjoyed this... well, you could just as well call it a tutorial by now. Mods, I really hope this is okay! Tipps from other members about other upload sites: [quote name="Zrcalo" date="2013-07-12 01:47:37" url="main.php?p=mb&board=skin&page=1&id=421015#459099"] Also I would skip photobucket entirely. 90% of the time their direct links dont work, they dont upload correctly, or they resize your image. I try to click links for photobucket but I only get the thumbnails. The only program they look okay in is internet explorer. [/quote]

Saer

Zrcalo wrote on 2013-07-12 01:47:37:

117

July 10, 2013 13:28:08

Uploading

There are a multitude of free websites that can be used for hosting your image, so I'll just go over the ones used most.

On Imgur, you can upload images without creating an account, or create one if you want to.

1. To upload your image, simply click on "Computer" on the right side to upload a file from your harddrive. Select the image. Once you selected it, you will be taken to a window where you can choose to upload more images from your pc by pasting them, draggin them there or simply selecting them from your harddrive again. Then simply click "Upload".

2. Once your image has been uploaded, you can either grab the direct link from the box on the right or a ready-to-use code for the forum that you can simply copy and paste.

Imageshack

On ImageShack, but you do not need to!
You can either log in with facebook or create an account, where you will need to enter your e-mail, gender and birthdate.

1. To upload an image, click on the Browse button and choose your file. You also have the option to change the size of your image, but I do not really recommend this for resizing your image, so choose the "Do Not Resize" option from the dropdown menu. Once you selected your file(s), simply hit the "Upload" button.

2. Click on "Continue To The Image Links"

3. Here again you will have the choice to get either the direct link or a ready-to-use code. Just click on one of the fields to automatically select the link/code and then copy it! If you don't know how to insert an image into your post, I suggest using the already finished code that is in the field labeled "IForum-Code" .
If you do not have an account, the "Direct Link" field will be unaccesible, but you can still use the "Forum-Code" to get the ready-to-use code. This will however come with a "Uploaded with Imageshack" link underneath the picture, but will not influence the picture itself.

Dropbox

I recommend Dropbox only if you plan to upload a lot of images, since setting it up is a bit more complicated.
Dropbox requires you to create an account, but provides more privacy than Imageshack or Photobucket, where everyone can just browse all of your pictures. On Dropbox, you can select which pictures will be public and people cannot browse all of your pictures. You can also create various folders to organize your images, for examply create a folder for each breed you made a skin for. For creating an account, you need to provide a name and your e-mail adress.
Once you create an account, you will be able to download the desktop version of dropbox, but I will only go over the browser version now. You will also need to confirm your e-mail adress. You can then either take the tour or just click on the dropbox icon to start uploading your files.

Since new users do not directly get a "Public Folder" anymore, you need to enable it first by going here: https://www.dropbox.com/enable_public_folder and clicking on "Enable Public Folder". This will also directly take you to your public folder!

1. In your public folder, click on "Upload" (to the left of the Search Field) to upload your file(s).

2. Wait for your file to finish loading, then click "Done" on the upload window to close it. Now right-click onto your image and select "Copy Public Link".

3. This will open a window where you can copy the Direct Link of your image. Use this to insert it into your post via the "Insert Image" button on the FlightRising forum (the little tree icon above the text field)

deviantArt, furaffinity and other art websites

If you already have an account on one of these websites, you might want to directly grab your images from over there without having to upload them again on a seperate site. This is fairly easy, you just need the direct image link. I will show you on the example of deviantart how to get to it. Really, it's simple. (Just remember that these sites are in maintenance mode from time to time (just like flightrising) and that your image will be unavailable during that time)

1. Upload your image to the art website of your choice. (For furaffinity: Remember that there are sometimes problems with displaying the transparency on furaffinity! ). I'm asuming you already know how to do that.

2. Go to your image and right-click onto the image. Depending on your browser you will have different options:

Firefox:

Safari:

Opera:

Interestingly this method did not work for me when I tried it with Internet Explorer, since the option was not choosable....

3. Once you got the direct link, just copy it and insert the image into your post on the flightrising forum by clicking the "Insert Image" button (the little tree above the text field) and copy the image link into the pop-up.

That's it! If you have any suggestions, tipps or questions or need specific help with uploading/resizing your image don't hesitate send me a message or reply to this thread! I will add all helpful tipps that have not been covered yet into my posts as quotes.

Also, if you find a typo, feel free to tell me so and I will fix it, english is not my native language.

I hope you have enjoyed this... well, you could just as well call it a tutorial by now. Mods, I really hope this is okay!

Tipps from other members about other upload sites:

Also I would skip photobucket entirely.
90% of the time their direct links dont work, they dont upload correctly, or they resize your image.

I try to click links for photobucket but I only get the thumbnails. The only program they look okay in is internet explorer.

Last edited on Jul 12, 2013 14:33:38 by Saer

In PhotoShop Elements you can't resize your image unless your check the 'Resample Image' box in the Image Resize menu. Hope that's useful, it had me hung up for a while.

Cool board :)

_{Oh nein, es ist in Deutsch! xD sorry, I'm dumb :B}

Oszs

257

351

560

5459

July 10, 2013 13:35:25

In PhotoShop Elements you can't resize your image unless your check the 'Resample Image' box in the Image Resize menu. Hope that's useful, it had me hung up for a while.

Cool board :)

_{Oh nein, es ist in Deutsch! xD sorry, I'm dumb :B}

My Accents / / Art Journal

Last edited on Jul 10, 2013 13:38:35 by Oszs

All done now!

@Oszs: Thanks for the tipp, I added that!

Saer

117

July 10, 2013 15:04:08

All done now!

@Oszs: Thanks for the tipp, I added that!

If you want to promote this thread, you can add this banner to your signature: [url=http://flightrising.com/main.php?board=skin&id=421015&p=mb][img]https://dl.dropboxusercontent.com/u/18742411/FlightRising/banner.jpg[/img][/url] Just copy this code into your signature: [code] [url=http://flightrising.com/main.php?board=skin&id=421015&p=mb][img]https://dl.dropboxusercontent.com/u/18742411/FlightRising/banner.jpg[/img][/url][/code] If you want to, you can also create your own banner! (Because honestly, that's not the best banner I've made...)

Saer

117

July 10, 2013 15:14:24

If you want to promote this thread, you can add this banner to your signature:

Just copy this code into your signature:

Code:

[url=http://flightrising.com/main.php?board=skin&id=421015&p=mb][img]https://dl.dropboxusercontent.com/u/18742411/FlightRising/banner.jpg[/img][/url]

If you want to, you can also create your own banner! (Because honestly, that's not the best banner I've made...)

Did anybody spot any typos? If yes, please let me know and I'll fix them!

Saer

117

July 11, 2013 07:18:23

Did anybody spot any typos? If yes, please let me know and I'll fix them!

Fixed some typos

Is there anything related to those topics you'd like me to add? Any uploading or resizing website I should cover? Any other art program?

Saer

117

July 11, 2013 09:17:32

Fixed some typos

Is there anything related to those topics you'd like me to add? Any uploading or resizing website I should cover? Any other art program?

I really like what you have going on here! I just wanted to add that Imgur is a great uploading website. You don't have to have an account. Just click and drag the image to the page. It's much nicer and faster than the mess that Photobucket is nowadays. :P

Piney

198

583

7474

July 11, 2013 22:29:33

I really like what you have going on here! I just wanted to add that Imgur is a great uploading website. You don't have to have an account. Just click and drag the image to the page. It's much nicer and faster than the mess that Photobucket is nowadays. :P

FR Tumblr

Seconding imgur!

Also I would skip photobucket entirely.
90% of the time their direct links dont work, they dont upload correctly, or they resize your image.

I try to click links for photobucket but I only get the thumbnails. The only program they look okay in is internet explorer.

Also in the official tutorial, they want you to save as a png-24. Not a regular PNG. how do you export a png-24 in any of these programs that's not photoshop?

Dactyl

319

1015

4996

July 12, 2013 01:47:37

Seconding imgur!

Also I would skip photobucket entirely.
90% of the time their direct links dont work, they dont upload correctly, or they resize your image.

I try to click links for photobucket but I only get the thumbnails. The only program they look okay in is internet explorer.

Also in the official tutorial, they want you to save as a png-24. Not a regular PNG. how do you export a png-24 in any of these programs that's not photoshop?

okay, added imgur and removed photobucket. I'll see about the png-24!
I can say that images saved as png-8 appear in PS as "Indexed" and png-24 as "RGB colors" in the Mode Menu...
An image saved as .png with GIMP appears as "RGB" in Photoshop, so I assume that it's png-24.
I wasn't able to try this with SAI since my trial expired long ago and I can't save anything with it. However, I think exporting your image as a "regular" .png file will most likely already result in a file that's either png-24 or pretty close to it.

Interestingly, I noticed that the file size varies quite depending on which program you save the file with. I've tried this with a 350px image with a gradient and transparency. Saving it in PS as a png via save as results in 76.1 KB, saving it via save for web as a png-24 gives us a 73.6KB file (the png-8 is 43.4KB). Saving it as a png in GIMP results in a 75.8KB file... (Highes Quality chosen each time)

@Zrcalo

Saer