Digitally Distinct: Signature Tutorial Thread

Need help with the site/forum/pets? Ask questions and get help from other members here.

Re: Digitally Distinct: Signature Tutorial Thread

Postby kristenn11 » Mon Jun 01, 2015 1:40 pm

{~Regina Magicae~} wrote:(I know it's kinda like the question I asked a lil while ago but)
I tried using This site. But when I tried to put in the image it wouldn't let me keep the transparencyImage


If you're trying to round the corners, just use this website. It's a little complicated, so I made a quick tutorial for you. I see you figured it out, but I still decided to make the tutorial for others who may have a similar problem.

Image
1. Okay, so first you open up online-image-editor.com and upload your image from your computer or by its url.

Image
2. You want to start by expanding your canvas so all four corners aren't rounded. If you want all four to be rounded, jump to step four. The expand canvas feature is found under the 2013 column.

Image
3. When expanding the canvas, keep the height the same and make the width some massive number. Then push the entire picture all the way to the direction it's at on the signature. For example, if it's on the far left, push it to the left. This is a crucial step to rounding the corners. When you are satisfied, click apply.

Image
4. Next you can round the corners of your picture. The feature can be found under basics.

Image
5. First, select a number for the radius. The higher the number, the more rounded the corners will be. After that, make the border go to 0. If you don't do this, you'll get an ugly yellow background and border. When you're done, click apply.

Image
6. Once your corners all rounded, you need to take off the open space you made next to your picture. You might end up with a yellow blotch like it did, but don't worry because as long as it isn't on or behind your picture, it doesn't matter. Simply go under basics and select crop. Then, drag the red lines and make them border your picture. Some devices won't let you drag the lines, so you'll have to type numbers on the side to get them where you want. Once you are satisfied, click apply.

Image
Ta-da! Sorry this took up so much space. Also, if there is an easier way to do this with oie, I didn't know.
kristenn11
 
Posts: 9355
Joined: Sun Sep 02, 2012 12:37 pm
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Re: Digitally Distinct: Signature Tutorial Thread

Postby Inevitablis Orbivium » Mon Jun 01, 2015 1:47 pm

Kristen wrote:
{~Regina Magicae~} wrote:(I know it's kinda like the question I asked a lil while ago but)
I tried using This site. But when I tried to put in the image it wouldn't let me keep the transparencyImage


If you're trying to round the corners, just use this website. It's a little complicated, so I made a quick tutorial for you. I see you figured it out, but I still decided to make the tutorial for others who may have a similar problem.
-snip-
Ta-da! Sorry this took up so much space. Also, if there is an easier way to do this with oie, I didn't know.

Well it only works with .jpg
Not .png
ImageImage
Image
╔════════════════╗
Female-Bisexual-ENTP
Hi! I enjoy chatting with
others so please feel free to
shoot me a pm. I would also
love it if you sent over a trade! c:

Signature was made by: Me
╚════════════════╝
Image
Image
Links!


Trades



Auction
Image
User avatar
Inevitablis Orbivium
 
Posts: 11048
Joined: Wed Dec 17, 2014 10:36 am
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Re: Digitally Distinct: Signature Tutorial Thread

Postby Insignia.Peril » Mon Jun 01, 2015 2:41 pm

It should work with .png files too, just type in "transparent" where is says color when you round the corners. Usually you have to do it twice, because the first time you type it in it'll say "00000" which is black. When you type it in the second time it should stick. Make sure the border width is at zero though, and then try it. That's how I've done all of my rounded .png files and it works quite well.
| (=^.^=)
[male | 18+ | intp | chaotic good | slytherin]
User avatar
Insignia.Peril
 
Posts: 20567
Joined: Wed Oct 01, 2014 12:10 pm
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Re: Digitally Distinct: Signature Tutorial Thread

Postby Guest » Mon Jun 01, 2015 4:47 pm

Wow, this will help me a lot! Thanks for making it! ^_^
Guest
 

Re: Digitally Distinct: Signature Tutorial Thread

Postby Erwin Smith » Mon Jun 01, 2015 6:54 pm

    I am just going to address this topic as a whole since there is some "I don't think that's true" going on here and I want to be able to make sure everyone is on the same page when it comes to this c:

    Transparency only works with PNG or GIF image formats if exported to a single layered frame. (Aka a compressed gif with 'x' number of frames or a compressed PNG with one frame)

    JPG is the most common form of image format as it is the most commonly used method of lossy compression for digital images, particularly for those images produced by digital photography, so this means most images on the internet are JPG as it is the default setting of image formats.
    Image
    Credit for Image. Example of a JPG image.

    While JPG are great to use for single images, they don't support transparency. If you try and make a part of a JPG image transparent, it will become either 110% black or 110% white instead. There is no inbetween.

    PNG on the other hand is what supports transparency. PNG stands for Portable Network Graphics and was created to work similar to how GIF works, as it can withhold "lossless data compression", aka it can have transparency as a colour. (Like Gif which had this format first)

    So if you want to do something that is anyway involving transparency, stoic or moving; you must use PNG or GIF formats to do so.

    If you do find a image that is JPG but you want it PNG, what you must do is this:
    (For windows)
    1. Open the image up in paint.
    2. Save image as PNG format.

    Literally, that is all you need to do. Paint exports to PNG, and this is the quickest way of doing so.
    *Note, the background from the JPG former image won't be transparent, that you MUST do yourself

    Anymore questions, please PM me c:

    Key words:
    Image Manipulation.
I am on mobile.
Current mood: Bachelor’s in psychology and having Aged care induced PTSD? What do you mean?
Least I helped change legislation for the better. Thank you aged care workers. ❤️
Image
Don’t you want to see a highlight?
Join your union
Erwin Smith
 
Posts: 7987
Joined: Tue Sep 27, 2011 3:49 pm
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Re: Digitally Distinct: Signature Tutorial Thread

Postby trees |-/ » Mon Jun 01, 2015 11:57 pm

What do you use to edit avatars? The same thing as sigs?
.
User avatar
trees |-/
 
Posts: 42038
Joined: Mon Aug 05, 2013 10:50 am
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Re: Digitally Distinct: Signature Tutorial Thread

Postby Erwin Smith » Tue Jun 02, 2015 12:00 am

#Misty wrote:What do you use to edit avatars? The same thing as sigs?

    Yes.
I am on mobile.
Current mood: Bachelor’s in psychology and having Aged care induced PTSD? What do you mean?
Least I helped change legislation for the better. Thank you aged care workers. ❤️
Image
Don’t you want to see a highlight?
Join your union
Erwin Smith
 
Posts: 7987
Joined: Tue Sep 27, 2011 3:49 pm
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Re: Digitally Distinct: Signature Tutorial Thread

Postby trees |-/ » Tue Jun 02, 2015 12:00 am

Levi Ackerman wrote:
#Misty wrote:What do you use to edit avatars? The same thing as sigs?

    Yes.

Thank you
.
User avatar
trees |-/
 
Posts: 42038
Joined: Mon Aug 05, 2013 10:50 am
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Re: Digitally Distinct: Signature Tutorial Thread

Postby skywalker, » Tue Jun 02, 2015 8:51 am

Code: Select all
[left][img]http://i.imgur.com/3VS73Tx.png[/img][/left][right][img]http://i.imgur.com/LIbtyH6.gif[/img][/right][right][img]http://i.imgur.com/KWjmYdt.gif[/img][/right]


Hello! Ive been experiencing some problems with one of the images. Its not going bellow the one with the dog.
Image
sky | she/her | adult
User avatar
skywalker,
 
Posts: 14253
Joined: Thu Nov 21, 2013 10:23 am
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Re: Digitally Distinct: Signature Tutorial Thread

Postby chrome » Tue Jun 02, 2015 8:53 am

Code: Select all
[left][img]http://i.imgur.com/3VS73Tx.png[/img][/left][right][img]http://i.imgur.com/LIbtyH6.gif[/img]
[img]http://i.imgur.com/KWjmYdt.gif[/img][/right]


there only needed to be one right column instead of two
Image ImageImage ImageImageImage ImageImageImageImage ImageImage
╔════════════╗




Image





╚════════════╝
partner
adult - they/them - shark enthusiast
ImageImage ImageImageImage ImageImage Image
User avatar
chrome
 
Posts: 5594
Joined: Wed Nov 27, 2013 11:30 am
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Who is online

Users browsing this forum: No registered users and 6 guests