Rosehill's Graphics Galore - Currently closed!

This forum is for art shops

Moderator: Hall of the Arts Moderators

Locked
User avatar
SeaCrest
CreaturesTrade
Posts: 8595
Joined: June 12th, 2009, 9:34:16 pm
Gender: Female

Re: Rosehill's Graphics Galore - CSS tutorial up!

Post by SeaCrest »

mzenun wrote:I can't make them cuz I'm terrible that stuff. T_T But I instantly fell in love with SeaCrest's kitty! :t-swoon:
:wtf: I recognize that signature... O.o It's MY set! *goggles*
User avatar
mzenun
CreaturesTrade
Posts: 2370
Joined: February 21st, 2011, 5:10:33 pm
Gender: Female

Re: Rosehill's Graphics Galore - CSS tutorial up!

Post by mzenun »

SeaCrest wrote:
mzenun wrote:I can't make them cuz I'm terrible that stuff. T_T But I instantly fell in love with SeaCrest's kitty! :t-swoon:
:wtf: I recognize that signature... O.o It's MY set! *goggles*
Yeah it used to say something like "This signature set was made by SeaCrest. Thank you SeaCrest!" but I ran out of room and I needed the space for the eggs for my shop, but I'm going to put it back up when I have enough room. ^_^
Image
Amazing Art by Hanako!

Image
Thanks SO much, Merkwerkee, for the tienko gift! :t-swoon:

School is before Magistream:(

Image
User avatar
Soleil
MagiStream Donor
Member of The Dark Brotherhood
CreaturesTrade
Posts: 15735
Joined: June 2nd, 2009, 9:22:18 pm
Gender: Female
Location: Vietnam

Re: Rosehill's Graphics Galore - CSS tutorial up!

Post by Soleil »

Yaay! Thanks for the tutorial Rosehill!

I tried to make one the other day and failed miserably (was attempting each piece as an individual image instead of one big one to be broken up) but I just made one using your tutorial and I lurves it.
Image
User avatar
suikun245
MagiStream Donor
CreaturesTrade
Posts: 2355
Joined: May 20th, 2009, 5:17:15 pm

Re: Rosehill's Graphics Galore - CSS tutorial up!

Post by suikun245 »

I have to thank you for the CSS tutorial (even though I didn't actually read much of it), simply because of the link to Firebug. Never knew it existed and definitely will make my life a couple times easier (at least if I decide to pick up web design ever again (which I probably will)). <3

Other than that, I hope you don't mind me stealing that base CSS you have there (since every time I try to save a CSS file using Chrome or Firefox and open it elsewhere (or even just view it in Chrome or Firefox), everything somehow ends up on one line and makes my life horrible).
Image
User avatar
Evanko
Member of Artificer's Association Member of Preservationists Association An icon depicting the element Void
CreaturesTrade
Posts: 71
Joined: August 5th, 2009, 4:55:29 pm
Gender: Non-binary
Location: Uruguay

Re: Rosehill's Graphics Galore - CSS tutorial up!

Post by Evanko »

Thanks a lot for the tutorials! I've made myself a siggy set~ *points down* It isn't perfect... But it's still okay xD
I'll try and make a profile :3
she/him
ImageImageImageImageImageImage
ImageImageImageImageImageImage Image
User avatar
mzenun
CreaturesTrade
Posts: 2370
Joined: February 21st, 2011, 5:10:33 pm
Gender: Female

Re: Rosehill's Graphics Galore - CSS tutorial up!

Post by mzenun »

I'm so confused. How do you make a signature set? That confused me. I told you I'm not good at this. XD
Image
Amazing Art by Hanako!

Image
Thanks SO much, Merkwerkee, for the tienko gift! :t-swoon:

School is before Magistream:(

Image
User avatar
Evanko
Member of Artificer's Association Member of Preservationists Association An icon depicting the element Void
CreaturesTrade
Posts: 71
Joined: August 5th, 2009, 4:55:29 pm
Gender: Non-binary
Location: Uruguay

Re: Rosehill's Graphics Galore - CSS tutorial up!

Post by Evanko »

mzenun wrote:I'm so confused. How do you make a signature set? That confused me. I told you I'm not good at this. XD

Um... Can I answer that?
Well, I just followed a few steps and didn't read through the whole thing... Flipping the sprites and brushes is the key, I guess x3 (Flip the side images horizontally and the top/bottom ones vertically)
....How do I continue explaining :omg:

Edit: I lorve that half set you have in your signature.
she/him
ImageImageImageImageImageImage
ImageImageImageImageImageImage Image
User avatar
mzenun
CreaturesTrade
Posts: 2370
Joined: February 21st, 2011, 5:10:33 pm
Gender: Female

Re: Rosehill's Graphics Galore - CSS tutorial up!

Post by mzenun »

evmspino wrote:
mzenun wrote:I'm so confused. How do you make a signature set? That confused me. I told you I'm not good at this. XD

Um... Can I answer that?
Well, I just followed a few steps and didn't read through the whole thing... Flipping the sprites and brushes is the key, I guess x3 (Flip the side images horizontally and the top/bottom ones vertically)
....How do I continue explaining :omg:

Edit: I lorve that half set you have in your signature.
I'm just confused about this whole thing because I suck at this technical stuff... :t-tantrum: And thanks, I love it! SeaCrest made it, and I love yours, but I wanna make an awesome one like yours... T_T
Image
Amazing Art by Hanako!

Image
Thanks SO much, Merkwerkee, for the tienko gift! :t-swoon:

School is before Magistream:(

Image
User avatar
Evanko
Member of Artificer's Association Member of Preservationists Association An icon depicting the element Void
CreaturesTrade
Posts: 71
Joined: August 5th, 2009, 4:55:29 pm
Gender: Non-binary
Location: Uruguay

Re: Rosehill's Graphics Galore - CSS tutorial up!

Post by Evanko »

mzenun wrote:I'm just confused about this whole thing because I suck at this technical stuff... :t-tantrum: And thanks, I love it! SeaCrest made it, and I love yours, but I wanna make an awesome one like yours... T_T

I could make a step-by-step teeny weeny guide?..

1- Open Photoshop/Gimp/whutevah graphics program you have.

2- Click on new, set the height at 300 pixels and the width at 620.

3- Click on View, them on New Guide, add:
Horizontal guides: 250 px and 50 px | Vertical guides: 120 px, 130 px, 490 px and 500 px.
This is how it should look.

4- Open the sprites you're gonna use (Egg, hatchies and adults or whatever~). You can get images at the MS Wiki.

5- Make layers for the eggs, hatchlings and adult sprites. Select the images and position them as such (This is of course an example, you can play around and be creative).

6- Add a new layer and start coloring around like this, for example. I prefer adding brushes/coloring inside the image, so you don't get cutted borders, I did this with my set.
6.1- When you get, say, the left side done, select it, copy it (Edit- Copy, Ctrl+C or right click+Copy) and paste. Click on Edit, hover your mouse on Transform and click on Flip Horizontally. Position the brushes on the right side (Or, if you started on the right side, put them on the left side xD)
6.2- Do the same with the top and bottom sections, this time flipping them vertically (Like in my set). I guess you can flip it horizontally, too.

7- Now, once you make sure you are done (Save a PSD/XCP/whatever so you can edit later), merge all layers, except the background, assuming you've created a bg layer x3.

8- Using the Crop tool (Or Cut+Paste as new image), crop all four sections and save them as PNGs.

9- Upload your set to TinyPic, Photobucket or any websites of that style and get the image URLs.

10- Once you've copied (And pasted them in the Notepad, maybe?) go to Bitly and make those URLs shorter!

11- When you have the short URLs, put them in this template:

Code: Select all

[imgleft]left side image url here[/imgleft][imgright]right side image url here[/imgright]
[center][img]top image url here[/img]
[Stuff goes here]
[img]bottom image url here[/img][/center]
11.1- Put your stuff in the line [Stuff goes here].

12- Go to the UCP- Profile- Edit Signature, paste, and you're done! Enjoy your new awesome siggy set! :italian:

I hope that helps :U[/color][/b][/center]
she/him
ImageImageImageImageImageImage
ImageImageImageImageImageImage Image
User avatar
mzenun
CreaturesTrade
Posts: 2370
Joined: February 21st, 2011, 5:10:33 pm
Gender: Female

Re: Rosehill's Graphics Galore - CSS tutorial up!

Post by mzenun »

evmspino wrote:
mzenun wrote:I'm just confused about this whole thing because I suck at this technical stuff... :t-tantrum: And thanks, I love it! SeaCrest made it, and I love yours, but I wanna make an awesome one like yours... T_T

I could make a step-by-step teeny weeny guide?..

1- Open Photoshop/Gimp/whutevah graphics program you have.

2- Click on new, set the height at 300 pixels and the width at 620.

3- Click on View, them on New Guide, add:
Horizontal guides: 250 px and 50 px | Vertical guides: 120 px, 130 px, 490 px and 500 px.
This is how it should look.

4- Open the sprites you're gonna use (Egg, hatchies and adults or whatever~). You can get images at the MS Wiki.

5- Make layers for the eggs, hatchlings and adult sprites. Select the images and position them as such (This is of course an example, you can play around and be creative).

6- Add a new layer and start coloring around like this, for example. I prefer adding brushes/coloring inside the image, so you don't get cutted borders, I did this with my set.
6.1- When you get, say, the left side done, select it, copy it (Edit- Copy, Ctrl+C or right click+Copy) and paste. Click on Edit, hover your mouse on Transform and click on Flip Horizontally. Position the brushes on the right side (Or, if you started on the right side, put them on the left side xD)
6.2- Do the same with the top and bottom sections, this time flipping them vertically (Like in my set). I guess you can flip it horizontally, too.

7- Now, once you make sure you are done (Save a PSD/XCP/whatever so you can edit later), merge all layers, except the background, assuming you've created a bg layer x3.

8- Using the Crop tool (Or Cut+Paste as new image), crop all four sections and save them as PNGs.

9- Upload your set to TinyPic, Photobucket or any websites of that style and get the image URLs.

10- Once you've copied (And pasted them in the Notepad, maybe?) go to Bitly and make those URLs shorter!

11- When you have the short URLs, put them in this template:

Code: Select all

[imgleft]left side image url here[/imgleft][imgright]right side image url here[/imgright]
[center][img]top image url here[/img]
[Stuff goes here]
[img]bottom image url here[/img][/center]
11.1- Put your stuff in the line [Stuff goes here].

12- Go to the UCP- Profile- Edit Signature, paste, and you're done! Enjoy your new awesome siggy set! :italian:

I hope that helps :U[/color][/b][/center]
That seems much easier! I'll try. Thanks for the help! :wave:
Image
Amazing Art by Hanako!

Image
Thanks SO much, Merkwerkee, for the tienko gift! :t-swoon:

School is before Magistream:(

Image
Locked

Return to “Seller's Gallery”