~Nessa's Winx Art Tutorials~

Subject: *~*Nessa's Winx Art Tutorials*~* Fri Jul 10, 2015 12:11 pm

First topic message reminder :

Hey guys!
I get asked frequently about how I make my art, and I thought making a tutorial would help some people out.
In this thread I will go through some of my tips, tricks and resources that I use.
I will also go through the steps I do to make some of my arts.
Enjoy and I hope you guys find this helpful

Some possible softwares to edit with:
Photoshop - the best of the best really. Out of all the ones I've used, Photoshop does produce the best quality images.
Trial: http://www.adobe.com/cfusion/tdrc/index.cfm?product=photoshop&loc=en_us
Photofiltre 7 - this is my secondary option to PS. Funny enough, it's the one I use the most. It can do the basics and is the programme I have started out with. It's got some really nice built in effects and I've achieved good results with it. It is fairly similar to Photoshop, but it's completely FREE.
Download: http://www.photofiltre-studio.com/pf7-en.htm
Gimp - Haven't used it personally, but know some people that have. Pretty similar to Photofiltre 7, it's free and it can open PDS files.
Download: http://www.gimp.org/

If you need any help using Photoshop or Photofiltre 7, then you can ask me and I'll try my best to explain. However there are plenty of tutorials for these programmes on YouTube so feel free to look around there~

Some possible online sites to edit with:
Picmonkey - http://www.picmonkey.com/
Really, really easy to use. It's got some cool effects and filters.
Pixlr-o-matic - http://pixlr.com/o-matic/
This one is good for filters only. Sometimes you may want to create your art in PS or something, and then give it a nice filter with this website.

Resources for textures & patterns:
Swimchick - http://swimchick.net/free-resources/textures (however, some have been deleted)
Alkaleez - http://blog.akaleez.co.uk/
I usually look around on DeviantArt for textures as well~ here are some people I find helpful:
Convicted resources - http://convicted-resources.deviantart.com/gallery/?offset=0
xnienke - http://xnienke.deviantart.com/gallery/?catpath=/
so_ghislaine - http://so-ghislaine.deviantart.com/gallery/
Resources-fantasy - http://resources-fantasy.deviantart.com/gallery/
I'd also highly recommend looking around on Zedge, it's also an app you can get on most android or apple devices. Most of their wallpapers are of high quality and I just go around saving nice wallpapers that could work and that I could use later.

Websites to upload fanart:
DeviantArt - of course. http://www.deviantart.com/
Photobucket - I'd recommend this one. It keeps the high quality of your arts. www.photobucket.com
Flickr - Once again, keeps the quality of your arts. https://www.flickr.com/
Imgur - It's alright, but it sometimes depletes the quality I find. https://imgur.com/

-------- EDIT ---------
Websites for official Winx PNG's:
- http://galeriawcfm.blogspot.co.nz/Heaps of PNG's, not all are high quality though
- http://winxclubcollection.blogspot.ru/ some high quality PNG's
- http://magicwitch.pl/winxclub/pngs/
- http://fairiesofwinxclub.blogspot.it/ heaps of high quality, some rare, PNG's

Some tips & tricks:
Not sure where to start with this, but here are a few pointers that could help.
-Always save your pictures as PNG files, always. It seems to be the best file for better quality images
-Seems a bit obvious, but for your arts to look nice the PNG's and textures your using have to be of high quality to start with. VK is probably the best to get the newest PNG's from, but there are plenty of sites out there that have other PNG's
-Sharpening the image always seems to work.
-Learn where the best resources are. It seems a bit silly, but I'm forever hunting for backgrounds and textures that I can use.
-Just play around. With everything. Online or in a programme. Spend some time playing around with different effects and seeing what looks the best.
-Don't force yourself to do artwork. I don't know about anyone else, but I seem to produce the best fanarts when I'm really in the mood or have been seriously inspired by something
-Always find a source of inspiration

If any of you guys have got anything to add to this, then post it here and I'll add it to the appropriate list. Thank you for reading and good luck with your arts

Tutorial #1: Animated Slideshow Signature
LEVEL: HARD

I think most of you here know the basics of Photoshop, so I thought I'd jump straight into the medium/hard end Razz

Don't worry, I'll do some easier ones too.
But today I'll show you how I made this signature (Loxa's current siggy):

*~*Nessa's Winx Art Tutorials*~* - Page 2 Siggy1_zpsz6nvjkyf

So let's get into it!

PART ONE:
Step one:
Open Photoshop and go up to File>New and make the canvas 560 wide and 340 high (560x340)

Step two:
Paste in this gradient

*~*Nessa's Winx Art Tutorials*~* - Page 2 Step%20two_zpszcftslxc

This will be the base.

Step three:
Add some pretty texture. I used this one below, but you could just about use anything that has a lot of detail.

*~*Nessa's Winx Art Tutorials*~* - Page 2 Step%20three_zpszq5vz496

You'll notice that this doesn't take up the whole space. Try to centre it so that there is a little border with the gradient on either sides.

Step four:
Make the layer you just added to have an opacity of 90%. You can do this by going into the 'Blending Options'

Step five:
Add this texture. Go to the 'Blending options' and set the blend mode to 'Lighten'.

*~*Nessa's Winx Art Tutorials*~* - Page 2 Step%20four_zps7ldnxuyw

Full image:

Step six:
Add whatever Winx girl you like. As you've seen, I chose Musa in her Butterflix. I'd make whoever you chose a similar size to what I've made Musa. Now once you've done that, go to Image>Adjustments>Hue/Saturation. Bring the saturation down to about -25. Then go to Image>Adjustments>Brightness/Contrast. Bring the contrast level up to about 80 (or whatever settings suits your chosen character).

Step seven:
Add this little polaroid.

*~*Nessa's Winx Art Tutorials*~* - Page 2 Polaroid_zpsrdc2ekx3

Then duplicate the layer, flip it horizontally and put it behind the bigger polaroid.

Step eight:
Add this section of an image and put it over the polaroid part.

*~*Nessa's Winx Art Tutorials*~* - Page 2 Section_zpslz0hl7ak

(It has been blurred a bit)
Go to the 'Blending Options' and select 'Lighten'. Change the opacity to 60%.

Step nine:
Duplicate the layer with this texture and bring it in front of everything you've got so far.

This layer:

Go to the 'Blending Options' and put the blending mode on 'Screen'. Change the opacity to 70%.

Step ten (optional):
Add some text. On my text, I went to the 'Blending Options' and used 'Stroke' and 'Gradient Overlay'. I made my own gradient. Play around a bit with colours and effects and see what suits your art!
Also, add text on the polariod bit with the name of your chosen fairy if you want.

But don't save it just yet!

PART TWO:
This second part can be bit tricky and tedious. This is the way I have done it; there may be an faster way out there but I haven't found one yet Razz

Step one:
Find a few screenshots of the character you have chosen. You can just google them. Find at least three you like and save them. (I used four screenshots)

Step two:
Open your first screenshot. Copy it into your project you have been creating. Go to Edit>Transform>Scale and make your screenshot so it'll fit what you want into the polaroid. (Tip: to do this, temporarily set the opacity as about 10-20% then change it back to 100% once you're happy)

Step three:
Once you've got it into the right position, select the layer with the polaroid in it. Press and hold down the 'Quick Selection' tool and select the 'Magic Wand' tool.

To clarify:

Step four:
Still on the polaroid layer, select the black area of the polaroid with the 'Magic Wand' tool

Step five:
Select the layer with the screenshot and copy this (you can use the keyboard shortcut Ctrl + C) whilst it is selected.

Step six:
Paste the area you copied. (Keyboard shortcut: Ctrl + V)

Step seven:
You should now have two layers: one with the full screenshot and one with the selected part of the screenshot. Delete the layer with the full screenshot. You should now have the screenshot within the polaroid. Put this layer so it is behind the galaxy layer but in front of the polaroid layer.

Step eight:
Now we are going to create the frames for our animation.
Make a folder where you can save your frames if you wish.
Flatten/Merge the layers of your image (Layer>Flatten Image).
Save your image using 'Save As' and name it something like '1'. Save it as a PNG for maximum quality.

Step nine:
Undo what you have just done to get the layers back (Edit>Step Backward).
Select the layer with the screenshot and use the Motion Blur effect (Filter>Blur>Motion Blur). My settings were Angle=38 and Distance=75 pixels, but 35 pixels should be ideal. You can chose whichever settings you like though.

Step ten:
Flatten/Merge your image and then go to 'Save As' and save it as '2' in your folder.

Step eleven:
Undo what you've again, and repeat steps eight to ten with your other screenshots.
(i.e. open and paste in your next screenshot, use the Magic Wand tool to select the area of the polaroid and copy the part of the screenshot you want, save it, undo it, Motion Blur the screenshot, save it again, undo it...and repeat)

(I got this technique from this tutorial: http://callmebrandon.tumblr.com/post/4607475739/disclaimer-this-tutorial-will-only-be)

PART THREE:
Almost there! By now you should have all your frames made.

Step one:
Open a new project on Photoshop (File>New). Go to Window and make sure that 'Animation' is selected.

A bar like this will appear:

Step two:
Go to File>Scripts>Load Files into Stack

A box like this will appear:

Step three:
Click Browse and select all your frames you've made. Press OK.

Step four:
Your frames will now start to load into the animation bar. Once it's done, click the button labelled 'I' in this image
*~*Nessa's Winx Art Tutorials*~* - Page 2 Vd_animation_frame

*~*Nessa's Winx Art Tutorials*~* - Page 2 Vd_animation_frame

Click 'Make Frames from Layers'
(NOTE: sometimes you have to reverse the frames. Go to the button labelled 'I' again, click 'Select All Frames', then 'Reverse Frames')

Step five:
Change the duration for all the normal screenshots to 0.5 seconds and all the blurred screenshots to 0 seconds. This is the setting I usually use but you can chose otherwise.

Step six:
Go to File>Save For Web & Devices. Make sure the file is a GIF file and you can preview it in IE or Chrome if you want. Press Save.

And that is all!

Wow, I didn't think through how many steps were needed. I always tend to make very multi-layered arts, so unfortunately they're all going to be quite long. I'm kinda thinking I jumped in the deep with this one, but I was just really exited to show you guys how I make some of my animations

PLEASE IF YOU'VE GOT ANY QUESTIONS ABOUT THIS TUTORIAL, FEEL FREE TO ASK ME HERE OR PREFERABLY IN PM.

Feel free to post your results in here

Subject: Re: *~*Nessa's Winx Art Tutorials*~* Fri Jul 17, 2015 8:50 am

*~*Nessa's Winx Art Tutorials*~* - Page 2 2870ox2

I added texture of mine i hope u dont mind

also where did u find dis *~*Nessa's Winx Art Tutorials*~* - Page 2 2_zpslnum5mxx

allsoo can u show me/us a tutorial of dis *~*Nessa's Winx Art Tutorials*~* - Page 2 BloomSirenixCGI2_zpsda2f141e

cuz i really love it and i want to learn

Subject: Re: *~*Nessa's Winx Art Tutorials*~* Fri Jul 17, 2015 7:49 pm

Wooooww these are so amazingly goood <3 You're tutorials have been a real help making my signatures Laughing

Thank you soo much!

Though quick question, do you know if you can get the animation thing in other programmes that don't cost money? I don't currently have gimp, but does that have the animation tool on it?

Subject: Re: *~*Nessa's Winx Art Tutorials*~* Fri Jul 17, 2015 8:02 pm

Awesome tutorial, what could you expect for Nessa anyways? Hehe, I'll try it in a couple of days.

Subject: Re: *~*Nessa's Winx Art Tutorials*~* Sat Jul 18, 2015 12:51 am

winxclubmagi wrote:: I added texture of mine i hope u dont mind

Of course not! My tutorials are only a guideline, you can change it up from mine. It looks amazing Maggie and thanks for trying it out Smile

winxclubmagi wrote:: also where did u find dis

I found it here: http://swimchick.net/free-resources/textures
Here's the full image: http://www.swimchick.net/resources/textures/newtextures/text133.jpg

winxclubmagi wrote:: allsoo can u show me/us a tutorial of dis
cuz i really love it and i want to learn

Yup, I could do ^.^ I can get that up fairly soon hopefully

VardaElentari wrote:: Wooooww these are so amazingly goood <3 You're tutorials have been a real help making my signatures Thank you soo much!

Though quick question, do you know if you can get the animation thing in other programmes that don't cost money? I don't currently have gimp, but does that have the animation tool on it?

I think you can make animations in Gimp, you just need additional software to do so (which is also free I think?). Unfortunately I don't have any experience with Gimp so I can't really help you any further, other than to maybe look up some tutorials. Sorry :\
I'm glad to hear that my tutorials have helped and thank you so much Angel

Fearless Diva wrote:: Awesome tutorial, what could you expect for Nessa anyways? Hehe, I'll try it in a couple of days.

Hehe, thanks Mel Blush

Subject: Re: *~*Nessa's Winx Art Tutorials*~* Sat Jul 18, 2015 2:14 pm

Here are my two ~~fails~~ attempts! I copuldn't do the animation and haven't gotten around to adding the text but I hope they're okay by your standards Image-Editing Goddess!!

*~*Nessa's Winx Art Tutorials*~* - Page 2 295cvp1

I wasn't particularly keen on how the frames ended up on this one, do you have any suggestions to make it better?

*~*Nessa's Winx Art Tutorials*~* - Page 2 Ev52y1

*~*Nessa's Winx Art Tutorials*~* - Page 2 Ev52y1

Subject: Re: *~*Nessa's Winx Art Tutorials*~* Sun Jul 19, 2015 1:57 am

VardaElentari wrote:: Here are my two ~~fails~~ attempts! I copuldn't do the animation and haven't gotten around to adding the text but I hope they're okay by your standards Image-Editing Goddess!!

I wasn't particularly keen on how the frames ended up on this one, do you have any suggestions to make it better?

They're beautiful, Varda! Angel

I think that might of been my fault for the way the polaroid thing turned out; the one I posted on here wasn't the original. The original was a lot bigger and when I shrunk it down (in Photofiltre which was a bad idea) it turned out bad quality. Maybe if you'd shrunk it down yourself it wouldn't have lost its quality. But I couldn't find the original unfortunately, sorry again *~*Nessa's Winx Art Tutorials*~* - Page 2 Animesweat

*~*Nessa's Winx Art Tutorials*~* - Page 2 Animesweat

Otherwise, they're really good attempts and I'm happy with what people have come up with Smile

Thank you for all the lovely comments <3
I'll have another tutorial up later on, this time it'll be a wallpaper!

Subject: Re: *~*Nessa's Winx Art Tutorials*~* Sun Jul 19, 2015 10:04 am

Hello again
This might be the last tutorial for a little while but I'll try to get the next one up as soon as possible.
Once again, so sorry for double posting, but I was afraid I wouldn't be able to post another tutorial for a while...

Tutorial #3: Wallpaper
LEVEL: Easy
Final product:

*~*Nessa's Winx Art Tutorials*~* - Page 2 BloomSirenixCGI2_zpssai1o8fz

Now, this one is made partially in Photoshop, and partially on picmonkey.com.

Step one:
Open a file in Photoshop with the dimensions of 1366x768 (widthxheight).
NOTE: this is my screen resolution so yours may differ

Step two:
Paste in this background:

*~*Nessa's Winx Art Tutorials*~* - Page 2 1_zpsbu8so8tg

This will be our base.

Step three:
Add in a nice texture to make the background more interesting. This is the one I used:

*~*Nessa's Winx Art Tutorials*~* - Page 2 2_zpscurfbjp6

Go to the 'Blending Options' and change it to 'Lighten'.

Step four:
Make a new layer (Layer>New>Layer). Go to the Selection Tool and select the middle third of the image, like so:

*~*Nessa's Winx Art Tutorials*~* - Page 2 Capture_zps3eodrm6y

(The Selection Tool is the one circled)
Go to Edit>Stroke. Make the width about 5 px, the Blending Mode on Normal and the colour white (or whichever you choose)

Step five:
Duplicate the layer you've just made (Layer>Duplicate Layer). Go to Edit>Free Transform and make this layer slightly smaller than the previous one. Make sure the Maintain Aspect Ratio button is selected. Once you're happy with the size, press the tick.

Step six:
Add a Winx girl of your choice; as you can see I chose Bloom.

Step seven:
Duplicate the layer of your Winx girl. Go to Filter>Blur>Motion Blur. Put the Angle on 40 degrees and the distance on 20 (or something of your choice). Put this layer behind the Winx girl.

Step eight: (optional)
Add some text of your choice. Mine was pretty simple, it just had an Outer Glow and Drop Shadow.

Step nine:
Flatten your image (Layer>Flatten Image). Save it as a PNG.
NOTE: sometime it's a good idea to save two copies before you flatten it; one as a PSD file in case you want to change something later on and one as a PNG

Step ten:
Now open your image in pickmonkey.com

Step eleven:
Go to the 'Textures' button (seventh button down on the side), select the 'Space' one, and select the third one. Put the Blend Mode on Hardlight. Press 'Apply'.

Step twelve:
Go to the 'Effects' button (second one down), select 'Cross Process', select 'Green' or 'Blue' (your choice), and put the opacity on about 50%. Once you're happy, press 'Apply'.

Step thirteen:
Press the 'Save' button up the top and enter your file name. Next to the file name there will be a button where you can choose your file type as a PNG. Press 'Save to Computer'.

And we're done!
If you have any questions, feel free to ask and post your results here!
Good luck with your arts!

Guest

VardaElentari wrote:: Though quick question, do you know if you can get the animation thing in other programmes that don't cost money? I don't currently have gimp, but does that have the animation tool on it?

GIMP has inbuilt animation tools...
~~I know something you don't know na na na na~~

Also thanks Nessie! Bounce

Subject: Re: *~*Nessa's Winx Art Tutorials*~* Mon Jul 20, 2015 10:03 am

Hey nessa what font did u use for the bloom pic

Subject: Re: *~*Nessa's Winx Art Tutorials*~* Mon Jul 20, 2015 10:30 am

WINXCLUBISMYPASSION wrote:

VardaElentari wrote:: Though quick question, do you know if you can get the animation thing in other programmes that don't cost money? I don't currently have gimp, but does that have the animation tool on it?

GIMP has inbuilt animation tools...
~~I know something you don't know na na na na~~

Also thanks Nessie! Bounce

You're welcome Smile

winxclubmagi wrote:: Hey nessa what font did u use for the bloom pic

KG Eyes Wide Open from dafont.com Smile

» GIMP tutorials
» Winx Club Online is back! + Winx Adventure Social Game!
» Maggie's art tutorials
» Katsu's Tutorials
» Tutorials w/Wizplace