Also one more suggestion that - I see many designer on KZbin providing excellent content/ web design but very few concentrate on mobile design. For eg: designer creates desktop version of web design but does not show mobile version/responsive design. It would begreat if you can add mobile design segment as part 2 of design if time permits. Thank you so much for the content
@RichardV-CPD5 жыл бұрын
Sushant Borsania 🤙 👍
@14onyx4 жыл бұрын
Designing and organizing for hierarchy yes but in mobile design you almost never get to hover an object and when you tap usually it takes you right to the next screen so what's left is usually for scrolling and that you cannot really achieve in XD but to drag.
@RichardV-CPD5 жыл бұрын
I’m glad that XD keeps getting better and better, thanks CE for always showing up this great features w/ examples.
@themikias5 жыл бұрын
Nice! 12:57 you could've also copied just the dripping path first, and paste it in hover so that you don't have to recreate the original state exactly how it was.
@srcomputerwork24132 жыл бұрын
BROTHER, YOU ARE THE BEST!!! You oooh really helped me!! THANK YOU VERY MUCH!
@ravenswood1182 жыл бұрын
This is really helpful! I just installed so many different effects with the tricks I used in this tutorial. Thank you for posting it.
@hussnainraza83124 жыл бұрын
Great video to guide us Hover effects in XD ... Thanks, men!
@yuk1wyd3102 жыл бұрын
Still working as of today! Thank you!
@samanthayoung38355 жыл бұрын
I absolutely loooove your channel! I've been learning a lot about design with you! Please keep the videos coming and thank you for sharing your knowledge with us!! :^)
@CalerEdwards5 жыл бұрын
Thank you and awesome to hear! Will do :D
@haoinhthanh2902 жыл бұрын
Thank you man for sharing this stuff
@buckyman43742 жыл бұрын
Hey! Thanks so much for this video!
@ashleykim71104 жыл бұрын
Thank you so much for this! It helped me tremendously. Subscribed!
@velimirtopolovacki89564 жыл бұрын
Awesome as usual Cal. Keep it up.
@geekthegeek7304 жыл бұрын
Man you are awesome and kind enough to share project files too
@AmanMehra-jo7ks4 жыл бұрын
By this video my some concept of prototyping are clear now
@MGeeDesigns4 жыл бұрын
Thank you for this video. I got tossed head first into trying to learn XD for a class I'm taking. I was wondering about how I could do something like this (different states) for prototyping.
@musahuda31413 жыл бұрын
Thanks man, this looks much better than applying the shadow feature.
@blessdarah12565 жыл бұрын
Yay!!! New video every week! Awesome
@ScottSaysStuff5 жыл бұрын
this was pretty friggin sweet! I thought it could be a good idea to add a gradient fill for the honey effect. thoughts?
@CalerEdwards5 жыл бұрын
Thanks! Go for it! Might look awesome :D
@aeshehhamdan72063 жыл бұрын
great video, but how did you change the mouse cursor into a circle in 13:59?
@evgeniyperekhod92785 жыл бұрын
Caler is awesome 😃
@CalerEdwards5 жыл бұрын
Thanks lol ;D
@evgeniyperekhod92785 жыл бұрын
@@CalerEdwards You are welcome :) I also like your design course on Udemy, I would love to see more courses from you in the future, I like your approach, nice, clean and clear. Thank you!
@WrongAkram5 жыл бұрын
He’s finally back! 😛
@michaelwong95264 жыл бұрын
Thank you so so much! I have learned so much from your tutorials!
@andersonrosero48792 жыл бұрын
Still working as of today, ty!
@OsamaElgebaly5 жыл бұрын
Awesome tutorial! Many thanks, It was easy and informative. Keep going. And wish u the best. All love.
@CalerEdwards5 жыл бұрын
Thank you :D
@chandershekharluhaniwal26864 жыл бұрын
WOW!! I am waiting for this effect i need to use it many of designs. Thanks for the video, Caler. It's an awesome feature to use it
@CalerEdwards4 жыл бұрын
:D
@brendincrandall66435 жыл бұрын
I love this channel and I look forward to the new schedule!
@CalerEdwards5 жыл бұрын
Thank you!! Looking forward to is myself :D
@germainrodriguez52305 жыл бұрын
Man, you're videos are so great!
@CalerEdwards5 жыл бұрын
Thank you :D
@kalpakkale4 жыл бұрын
If we create a drop-down menu with hover effect can we make them clickable in same artboard?
@nitushaw4756 Жыл бұрын
PERFECT
@A7med1Samy5 жыл бұрын
Thank you so much , I learned great things from this channel and I hope to see something like that but change the image with another for example just like we see in shopping websites
@cartridsmith5 жыл бұрын
thank you for awesome tutorial as usual, is there any way for the programmer to make effect like that?
@CalerEdwards5 жыл бұрын
Yes, probably even better as they would have complete control :D But I don't think it would be easy tho lol
@juanda18055 жыл бұрын
amazing video bro, thanks you so much
@shanxi15 жыл бұрын
thank you for thus tutorial. that helped a lot!
@simpleprogrammer58345 жыл бұрын
Really helpful deserve a big thumb up and a subscribe with notification from Asia keep going brother 🙏
@whianem3 жыл бұрын
13:45 I don't understand how could you make that liquid hover. I mean, I see two states of the same element but, how do you do it to create that slow animation instead of a hover where the honey just appears? Thanks!
@StyleLessDesign5 жыл бұрын
Can you maybe show us how to export this and code it up??
@AkshayVinchurkar5 жыл бұрын
You cant export this into code there was a plugin to export into code but I tried that its fake. if you want to code it then dm me i will help
@ameraibrahim95355 жыл бұрын
Great Tutorial! Thank you! :D
@maxbizley5 жыл бұрын
Cool effect, great explanation Caler. The last part about guesstimating the original anchor points seems a bit sketchy. Is there not a more precise way?
@CalerEdwards5 жыл бұрын
You might be able to copy the original path and paste it in after you have the default state set. Just make sure the layers are the same name and in same order. However, I would have to test it to make sure.
@maxbizley5 жыл бұрын
Caler Edwards Cool was thinking something like that. Will check it out. Thanks man.
@basit.designs5 жыл бұрын
How your mouse point show like magnifying glass ?
@CalerEdwards5 жыл бұрын
In the live preview? It does that when I record it in XD, might be mac only not sure.
@sawancenarock5 жыл бұрын
How to implement this in the live website? How can we do the transition effect?
@kiranthottingal5 жыл бұрын
+1
@TechnologiaAcademy5 жыл бұрын
?
@kiranthottingal5 жыл бұрын
@@TechnologiaAcademy how to implement this ? Pls do a video on that
@AkshayVinchurkar5 жыл бұрын
It's not that hard to do add a hover state for div and apply a transition to it use box-shadow property to get the shadow effect for honey drop to convert that into svg file and then use ::before sudoclass for box div and add that image into it position it and in hover state manipulate that image its very simple.
@ReactiveStudios5 жыл бұрын
how he convert the mouse pointer into touch circle in preview Window ?
@AkshayVinchurkar5 жыл бұрын
its a mac only feature if your working in windows it's not for you I don't know what problem adobe has with windows users.
@suchitsheth11925 жыл бұрын
Hello clar, It was awesome video with hover Effect
@suchitsheth11925 жыл бұрын
Sorry Caler apologize for name. Mistake
@richardottley46115 жыл бұрын
Great job 👍
@ccCat8884 жыл бұрын
How do you change the hover speed? Or XD doesn't let users change the speed?
@vredrick_5 жыл бұрын
Great video man👍. Looking forward to the new schedule.
@ShujaathKhan4 жыл бұрын
Your voice is iconic, thanks
@borsaniasushant15 жыл бұрын
Hi caler, thank you for the video tutorial. Since you know development also, I would like to know more about box Shadow. How can we implement while development as box Shadow may not exactly replicate the effect? Is it pseudo element that we place? Thanks
@CalerEdwards5 жыл бұрын
I would use a pseudo-element with :after to create the shadow. Then animate the opacity on hover. With the box shadow set to something like this: box-shadow: -20px 20px 42px 0px rgba(111,120,150,0.12); Hope that helped :D
@borsaniasushant15 жыл бұрын
@@CalerEdwards thank you
@carmelmanriquez78904 жыл бұрын
I tried to change the honey's time so it would drop slower but I couldn't. Is that possible?
@sawancenarock5 жыл бұрын
How to use this effect on my website? Css code?
@CalerEdwards5 жыл бұрын
Someone here in the comments posted a codepen of it that looked pretty good if you can find it :D
@joaomq855 жыл бұрын
Nice tutorial, so much valuable to us, poor ordinary mortal designers! 😁 I just haven't figured out why you used a new rectangle to make the drop shadow instead of using XD's native drop shadow feature.
@CalerEdwards5 жыл бұрын
lol idk about being anything other than a mortal designer. I don't think the native drop shadow will animate tho. At least I couldn't get it working. Thanks for the comment :D
@uxwithrobin4 жыл бұрын
Wao that's great
@barbarosisik50574 жыл бұрын
how could i use it in my website, it works in xd but when i export it from web export, to make it as a website, it didnt work as an html file. Do i need css and javascript or?? Please can someone help?
@ShanjaiRaj4 жыл бұрын
Awesome
@malikusman13234 жыл бұрын
I don't have this Component Instance option in mY xd?
@albydm1233 жыл бұрын
can anyone else not find the "object blur" option? has it been updated into something else?
@Yash-by5dl2 жыл бұрын
Can anyone tell me how to export this as a interactive pdf
@SethDoray4 жыл бұрын
Hello! For the life of me I cannot understand the reason behind using a duplicated rectangle as well as the thing you are trying to mask when masking. I'm having a lot of trouble getting this down. trying to figure out components
@pendaco5 жыл бұрын
Helvetica Neue = New, spoken like 'noise' > noi-uh 😉
@CalerEdwards5 жыл бұрын
I will never be able to say it correct lol
@spybooth12355 жыл бұрын
Goooood
@brandongroce4 жыл бұрын
YA BOIIII
@CalerEdwards4 жыл бұрын
YURRRR!
@yassineboujalla1504 жыл бұрын
🔥
@chenjiang77034 жыл бұрын
I have a question why the author's mouse icon is a round?
@CalerEdwards4 жыл бұрын
The icon changes in live preview on mac to that round cursor to simulate a users interaction.
@codingsense5 жыл бұрын
good vid keep up
@CalerEdwards5 жыл бұрын
Thank you! Will do :D
@mohammadkhosrotabar87644 жыл бұрын
I can convert design to html and css and JavaScript codes using web export plugin in adobe xd and then change the codes with adobe dream weaver for example . but i have issue with that plugin . when i use it , scale of design will be change and i have a bad view of my design in browsers. if someone knows a way that how we can convert design to codes truly so please help me. Thank you 🤗
@uxwithrobin4 жыл бұрын
You can enjoy micro interaction designed in adobe XD from my channel just open and see the videos For learning just comment and inform if yes then i will start creating tutorials on UI DESIGN and micro interaction from adobe XD
@sudeepkumar92693 жыл бұрын
can you please let me know how to export the hover effect using the web export plugin?
@DevAbu973 жыл бұрын
Want to create an amazing hover effect using HTML & CSS? Check this video - kzbin.info/www/bejne/rnypmX-neNKZeLM
@ROBJYADIGG4 жыл бұрын
just stick to the hover effect, this is not suppose to be about design.