Shop Mobile More Submit  Join Login
fade text in CD Art Display by OtisBee fade text in CD Art Display by OtisBee
hopefully this short tutorial will help you to easily create a nice and decent looking fade-in/out effect for your skin's textlines.
if there's anything you don't understand, please say so and i'll try to help.

skins using textline mask images:

Add a Comment:
 
:iconbigcyco1:
bigcyco1 Featured By Owner Oct 22, 2011  Hobbyist General Artist
Great tutorials thanks
Reply
:iconotisbee:
OtisBee Featured By Owner Oct 24, 2011   Interface Designer
you know, i once had the idea of creating a tutorial for each and every function or feature there is in CD Art Display, but considering the huge amount and also my wish to make these tuts as visually pleasing and understandable as possible, i only managed to create a few.

however, i very much appreciate the fact that you now think that those few tuts are great already.

thanks a lot, dude. :w00t:
Reply
:iconbigcyco1:
bigcyco1 Featured By Owner Oct 24, 2011  Hobbyist General Artist
:highfive:
Reply
:iconbarberiox:
barberioX Featured By Owner Apr 23, 2010  Hobbyist Interface Designer
Just a short addition for those which had problems with point No.3 of the tutorial:

When you have copied the skin's desired part (No.2), just add a mask to it (3rd icon from the left in the Layer window).
Then click into the new applied mask (shown right from your layer in the window) and apply a white/black/white horizontal gradient to it in the working space.
Continue with step No.4...

That worked good for me. :)
Reply
:iconotisbee:
OtisBee Featured By Owner Apr 24, 2010   Interface Designer
hmm, .. white-black-white wouldn't look too good if your skin's background is green (or any other color) for example, would it?
Reply
:iconbarberiox:
barberioX Featured By Owner Apr 24, 2010  Hobbyist Interface Designer
Sure. But you use it just for the mask. The black parts will be transparent and the white parts show the solid color of the background. :)
Just tried it again with my Bottomless (the old were shitty), and it looks very good.
Reply
:iconotisbee:
OtisBee Featured By Owner Apr 25, 2010   Interface Designer
ah, i see. well, i guess i'll have to try that myself then. :)
Reply
:iconbarberiox:
barberioX Featured By Owner Apr 25, 2010  Hobbyist Interface Designer
:) I redid "Bottomless" recently. Take a look at the mask.png's. It works good there.
See you, my friend. :bye:
Reply
:iconburnsplayguitar:
burnsplayguitar Featured By Owner Mar 27, 2010  Hobbyist Interface Designer
amazing man.
Reply
:iconotisbee:
OtisBee Featured By Owner Mar 27, 2010   Interface Designer
i hope you can use it somewhere sometimes. :)
thanks for the fav, Adilson! :hug:
Reply
:iconburnsplayguitar:
burnsplayguitar Featured By Owner Mar 27, 2010  Hobbyist Interface Designer
:thumbsup:
Reply
:iconimflawed:
imflawed Featured By Owner Mar 26, 2010
i tried this but it wont work ):

the mask i made doesnt make any effect to the text.

it just become a solid color on the text area..
i already set transparent on the PNG-24
Reply
:iconotisbee:
OtisBee Featured By Owner Mar 26, 2010   Interface Designer
hmm, .. and you've selected "save for webcontent" instead of the regular "save as" dialog, right?
how does your psd document look like before you'd save it? there are no additional (fully opaque) background layers that are still activated, no? can you post a screenshot of your file how it's displayed in photoshop?
Reply
:iconimflawed:
imflawed Featured By Owner Mar 26, 2010
theres no opaque background when i save it.

heres the screenshot

[link]
Reply
:iconotisbee:
OtisBee Featured By Owner Mar 26, 2010   Interface Designer
if you like you can send me both your skin and the psd file and i'll take a look at it. maybe i'm able to fix it and can then tell you what went wrong.
otisbeeatcdartdisplaydotcom
Reply
:iconimflawed:
imflawed Featured By Owner Mar 27, 2010
sent it.
Reply
:iconotisbee:
OtisBee Featured By Owner Mar 27, 2010   Interface Designer
the mask overlay displays just fine here.
well, i've replied to you in an email. ;)
Reply
:iconbayushi-tai:
Bayushi-Tai Featured By Owner Mar 3, 2010  Hobbyist General Artist
Excelent toturial my friend. As you can see i'm kinda loosed lately
but i read everything that all of you upload, and i'll start to build some skins pretty soon. Good bye my friend !:wave:
Reply
:iconotisbee:
OtisBee Featured By Owner Mar 4, 2010   Interface Designer
that's funny .. just recently i was thinking: "wo ist eigentlich Bayushi-Tai abgeblieben??", which is "where actually has Bayushi-Tai got to??" in english. :D

well, there you are. :w00t:

thanks for your great (yet remote) support. i know you're there even if you're not. :nod:
and thanks one more time for another fav, man! :bow:
Reply
:iconbayushi-tai:
Bayushi-Tai Featured By Owner Mar 4, 2010  Hobbyist General Artist
You're welcome my friend. :D
I was working on a new AveDesk theme for my desktop,
but i got some unfinished projects of CAD in my bag.
Actually, i'll start to download all the CAD skins
that i doesn't have in my folder to test them,
there are many of them !!
Reply
:iconpoulnyrup:
PoulNyrup Featured By Owner Mar 2, 2010
Thanks for the excellent tutorial Otis - if only we all had your pedagogical skills... :D
Reply
:iconotisbee:
OtisBee Featured By Owner Mar 4, 2010   Interface Designer
..and where would that leave me, huh?
there'd be nothing more to teach you then. :D

but seriously.. i'm soo glad that this came out this nicely and that soo many people find it that useful, so they even consider using my tips in an upcoming skin.

thanks a bunch, dude.
reading you always means a lot to me. :XD::horns:
Reply
:icongamerworld14:
GamerWorld14 Featured By Owner Mar 2, 2010  Student Interface Designer
Great job, thanks! :D
Reply
:iconotisbee:
OtisBee Featured By Owner Mar 4, 2010   Interface Designer
you're by all means welcome! :)
thanks for faving, mate! :bow:
Reply
:icongamerworld14:
GamerWorld14 Featured By Owner Mar 4, 2010  Student Interface Designer
You're welcome! :D
Reply
:iconvipervoid1:
vipervoid1 Featured By Owner Mar 2, 2010
Nice tutorial ..
thx...
Reply
:iconotisbee:
OtisBee Featured By Owner Mar 4, 2010   Interface Designer
my pleasure. :lol:
thanks for your fav! :dance:
Reply
:iconvipervoid1:
vipervoid1 Featured By Owner Mar 4, 2010
:)
Reply
:iconloogiethespheal:
LoogieTheSpheal Featured By Owner Mar 2, 2010
Also, here's the .cskin for refrence ( [link] ) You can see that the prev and next buttons work, but not the min, max, or exit buttons.
Reply
:iconotisbee:
OtisBee Featured By Owner Mar 2, 2010   Interface Designer
ha, i figured it out.
your skin is missing the most essential item in a toolbar and that's the play.png.
without that many other buttons won't show.
even if you'd want your skin to show no play button, it is still mandatory to have a play.png in your skin's toolbar folder.
just create some fully transparent play.png, play1.png and play2.png files and everything should be fine again. ;)
the reason why you need to put all three of them in that folder is that exit1 (&2), min1 (&2) etc. won't show either, if there isn't a play1 (&2) as well.
Reply
:iconloogiethespheal:
LoogieTheSpheal Featured By Owner Mar 2, 2010
Thank you!
Reply
:iconotisbee:
OtisBee Featured By Owner Mar 2, 2010   Interface Designer
so it works now? :eager:
Reply
:iconloogiethespheal:
LoogieTheSpheal Featured By Owner Mar 2, 2010
Yeppers.
For the record, it's based on this VS
[link]
Reply
:iconotisbee:
OtisBee Featured By Owner Mar 2, 2010   Interface Designer
yeah, i thought there was a resemblance with the titlebar of your Skin Editor screenshot. :D
great you got it working now. :clap:
Reply
:iconloogiethespheal:
LoogieTheSpheal Featured By Owner Mar 2, 2010
Done, and used.
Reply
:iconotisbee:
OtisBee Featured By Owner Mar 2, 2010   Interface Designer
excellent! :headbang:
Reply
:iconloogiethespheal:
LoogieTheSpheal Featured By Owner Mar 2, 2010
Some of the toolbar buttons I'm trying to use won't show up. They're in the correct folder and everything.
Reply
:iconotisbee:
OtisBee Featured By Owner Mar 2, 2010   Interface Designer
hmm, .. have you checked if the toolbar area values for width and height are set large enough to show your buttons?

you could activate the "draw guide lines" feature for the time you'd make your changes, as this will help you to easily determine where that toolbar area actually starts and ends.

besides, if you'd like to move around a button, also make sure to actually select that button from the list of icons in the according Skin Editor tab for toolbar settings.

it is likely that all buttons are placed as some sort of a pile overlapping eachothers, if their position wasn't previously configured.
Reply
:iconloogiethespheal:
LoogieTheSpheal Featured By Owner Mar 2, 2010
I have "Draw guide lines" enabled, but the guide lines won't show, also, nothing will even move, even if I click the button from the list of icons.
Reply
:iconotisbee:
OtisBee Featured By Owner Mar 2, 2010   Interface Designer
if the guide lines won't show, then my guess would be that the toolbar area is set to 0 (zero) in both width and height.
that toolbar area is what you need to configure first. you can finetune it later, but for now set an area that's large enough to host your buttons (e.g. 400x400 or something).
the buttons would only show up in that very area, so if there's only a tiny little area configured, there isn't a chance for the buttons to show up.
if you manage to set a large enough area there, but still won't see any button, then it could be that you've already moved them outside of that area without knowing. reset their pad left and top values to 0 (zero) and they should show up in the top left corner of your toolbar area.

another idea could be that you have created a typo while naming the files. in general you should make sure that folders always start with a capital letter, whereas files need to be named in lowercase writing.

btw, what buttons are you trying to use? please note, that a play1.png button would only show if there's also a play.png. same goes to all the other buttons.

oh, and one more thing... is the toolbar set to be "always visible" or to "appear on mouseover" or is it even set to "none"? please, check that and make sure you've selected "always visible". ;)
Reply
:iconloogiethespheal:
LoogieTheSpheal Featured By Owner Mar 2, 2010
Well, I have the area set to a regular size, and have all three files. ( [link] ) ( [link] )

The problem is that the skin won't update unless I click the refresh button. Also, the buttons will not move unless I click the refresh button.
Reply
:iconcalebwye:
calebwye Featured By Owner Mar 2, 2010  Student General Artist
this is great! will definitely use it. now please make a tut on how to do animations or something like that :D

enlighten us poor skinners
Reply
:iconotisbee:
OtisBee Featured By Owner Mar 2, 2010   Interface Designer
let me put it this way: i'll think about it. :giggle:

either way, .. i'm sure i'll create more short tuts about the more or less hidden features in CAD. :nod:

for now i'm just glad that this tut came in handy for you and that you're considering to use textline "mask" images in a skin some day. :lol:

thanks for the encouraging feedback and thanks for the fav, buddy. :bucktooth::horns:
Reply
:iconcalebwye:
calebwye Featured By Owner Mar 2, 2010  Student General Artist
lol i know it's a lot of work. well i'll be looking forward to the tuts :D i was gonna use the textline mask thing on a new skin i'm working on, but unfortunately the area where the text is is quite transparent. oh well.
Reply
:iconotisbee:
OtisBee Featured By Owner Mar 2, 2010   Interface Designer
yep, the mask thing only looks crisp and clean if used on a solid background (e.g. case or panel). :nod:
there might be a workaround, tho: [link] :)
Reply
:iconcalebwye:
calebwye Featured By Owner Mar 2, 2010  Student General Artist
well that's an idea, and i'll keep that in mind. thanks!
Reply
:iconnotorious-grafix:
NotoriouS-GrafiX Featured By Owner Mar 2, 2010
Thanks for this! I have a question, is it possible to do it with a transparent background? The text on my skin sits on the desktop wallpaper.
Reply
:iconotisbee:
OtisBee Featured By Owner Mar 2, 2010   Interface Designer
unfortunately not. it might work with a trick tho...

...let's say you have the psd resources of a wallpaper with a plain colored background (no gradients, no inner glow or -shadow or whatsoever) and a partially transparent layer (with seethrough stuff like pattern, gradients, glow etc) on top of that, then you can cut out a predefined area from that partially transparent wallpaper layer (check CAD's Skin Editor for the required textline area width and height) and then add that to the "textline mask overlay", which you'd previously have created using the plain color from your wallpaper (as explained in my tutorial).

the difficult part would be that your skin would always have to be locked on one single specified position to keep the illusion.

well, a thousand words can not describe what a single image can do.
please, take a look at the illustration i created for you: [link] :)

i hope that was helpful. tell me, if you have any more questions. ;)

and hey ... thank you heaps for the fav. :w00t:
Reply
:iconmurasaki55:
murasaki55 Featured By Owner Mar 2, 2010
very nice tutorial. didn't know this is possible. :thumbsup:
thanks for sharing sir Otis :+fav:
Reply
:iconotisbee:
OtisBee Featured By Owner Mar 2, 2010   Interface Designer
my pleasure, mate. :lol:
it'd be great to see more skins making use of this. :nod:
well, thanks for your kind feedback and fav. :hug:
Reply
Add a Comment:
 
×




Details

Submitted on
March 2, 2010
Image Size
131 KB
Resolution
400×956
Thumb

Stats

Views
4,515
Favourites
35 (who?)
Comments
76
Downloads
172
×