HOME | DD
OtisBee — fade text in CD Art Display
Published: 2010-03-02 12:42:21 +0000 UTC; Views: 5326; Favourites: 37; Downloads: 177
Redirect to original
Description
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:
Related content
Comments: 76
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.
👍: 0 ⏩: 1
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. 
👍: 0 ⏩: 1
hmm, .. white-black-white wouldn't look too good if your skin's background is green (or any other color) for example, would it?
👍: 0 ⏩: 1
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.
👍: 0 ⏩: 1
ah, i see. well, i guess i'll have to try that myself then.
👍: 0 ⏩: 1
See you, my friend.
👍: 0 ⏩: 0
i hope you can use it somewhere sometimes.
thanks for the fav, Adilson!
👍: 0 ⏩: 1
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
👍: 0 ⏩: 1
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?
👍: 0 ⏩: 1
theres no opaque background when i save it.
heres the screenshot
[link]
👍: 0 ⏩: 1
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
👍: 0 ⏩: 1
the mask overlay displays just fine here.
well, i've replied to you in an email.
👍: 0 ⏩: 0
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 !
👍: 0 ⏩: 1
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.
well, there you are.
thanks for your great (yet remote) support. i know you're there even if you're not.
and thanks one more time for another fav, man!
👍: 0 ⏩: 1
You're welcome my friend.
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 !!
👍: 0 ⏩: 0
Thanks for the excellent tutorial Otis - if only we all had your pedagogical skills...
👍: 0 ⏩: 1
..and where would that leave me, huh?
there'd be nothing more to teach you then.
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.
👍: 0 ⏩: 0
you're by all means welcome!
thanks for faving, mate!
👍: 0 ⏩: 1
my pleasure.
thanks for your fav!
👍: 0 ⏩: 1
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.
👍: 0 ⏩: 1
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.
👍: 0 ⏩: 1
Yeppers.
For the record, it's based on this VS
[link]
👍: 0 ⏩: 1
yeah, i thought there was a resemblance with the titlebar of your Skin Editor screenshot.
great you got it working now.
👍: 0 ⏩: 0
Some of the toolbar buttons I'm trying to use won't show up. They're in the correct folder and everything.
👍: 0 ⏩: 1
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.
👍: 0 ⏩: 1
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.
👍: 0 ⏩: 1
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".
👍: 0 ⏩: 1
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.
👍: 0 ⏩: 0
this is great! will definitely use it. now please make a tut on how to do animations or something like that
enlighten us poor skinners
👍: 0 ⏩: 1
let me put it this way: i'll think about it.
either way, .. i'm sure i'll create more short tuts about the more or less hidden features in CAD.
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.
thanks for the encouraging feedback and thanks for the fav, buddy.
👍: 0 ⏩: 1
lol i know it's a lot of work. well i'll be looking forward to the tuts 
👍: 0 ⏩: 1
yep, the mask thing only looks crisp and clean if used on a solid background (e.g. case or panel).
there might be a workaround, tho: [link]
👍: 0 ⏩: 1
well that's an idea, and i'll keep that in mind. thanks!
👍: 0 ⏩: 0
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.
👍: 0 ⏩: 1
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.
👍: 0 ⏩: 0
very nice tutorial. didn't know this is possible. 
thanks for sharing sir Otis
👍: 0 ⏩: 1
my pleasure, mate.
it'd be great to see more skins making use of this.
well, thanks for your kind feedback and fav.
👍: 0 ⏩: 1
no problem.
might use this on my next release.
👍: 0 ⏩: 1
| Next =>