You don’t even have to credit the photographer. You can use them commercially on any web design project. So, for example, if you want some cool nature photography, they have just incredible professional photos that you can use on your project. So it’s super easy to download you don’t even have to sign up for the service. You can just download the photo that you want to use. It’s a free, download and again just goes right in your downloads, and you don’t even have to credit the person that took it.
So the next tool that I want to talk about is called Pixlr, and this is an online photo editor, so it makes it really easy to quickly like rescale and darken images just in your web browser, so they have an editor and they also have this new Pixel er X, so I’m going to do that one because it’s a little bit faster to work with. So we downloaded this really huge file from pixels and you can see that the dimensions are five thousand one hundred and eighty four by three thousand four hundred.
Fifty six, so this is a huge photo in a huge file and Squarespace recommends that the max width be two thousand pixels wide for images. So I can just click. This arrange button up here and resize the image and bring that down to a max width of 2000. So this is a really great way to quickly scale down images very fast in the browser. The other thing that you can do is sometimes your pictures are too bright and if you’re going to have a white heading over the banner, then it won’t show up as well.
So this is a really great way to also just kind of darken up your photos. Very quickly, too, and it has a lot of different color controls and brightness control. So this is a really cool online and free editor to quickly edit your photos and scale them down to make them ready for Squarespace. Once you’re done I’ll, just okay, those settings click Save make sure your % is on a hundred. So it’s the highest quality and you definitely want to be a JPEG, and so now I’m going to click Save and it’s automatically saved to my downloads.
The next tool that I want to talk about is called a compressor dot IO, and this is an online image. Compressor and it’s the best one that I’ve ever come across, it’s so simple to use and really quick to image. Compression is super important when you download a picture from pixels they’re. Huge files are like five thousand pixels by two thousand pixels and they’re like three megabytes. So, even if we scale the image down in Pixlr that’ll help a little bit, but it can’t compare to actual image compression.
So that’s why this step with compressor IO is so important. All you have to do is click to upload your file. This is the image that we scaled down with Pixlr. You can see before it’s three point, six, two megabytes, which is huge. You would never want your website to have a image that big, because I mean you can see even just uploading it to this site. It takes a really long time to download and that can affect your SEO as well.
Google likes really fast websites, so if you have huge images that are just making your site chug, it’s really going to affect your search results too, so extremely important that you use this with your projects. I use it on every single project and look at this. This is amazing, it took a 3 megabyte file and it turned it into a six hundred four kilobyte file. Now, generally, you would want to aim for under five hundred kilobytes and there’s some things we could do like we could crop it vertically.
So it was a little bit less tall vertically because in Squarespace like you would never really have a banner that would need to be this tall, so that would probably get us under that 500 kilobyte mark, but just the fact that it’s able to take it from 3 megabytes and turn it all the way down to only 600 4 kilobytes is amazed. So then you just click here to download your file and you get your file right there in the downloads.
So the next tool that I want to share with you guys is this CSS gradient. I oh it’s this online background gradient editor and it makes it way easier than writing your own gradient code. You can play with the sliders here, there’s a whole bunch of different settings. You can adjust the colors. You can adjust these sliders up here to determine where the colors lie and you can also choose between linear or radial, and you can choose the angle as well done here.
So that makes it really really easy to create background gradients and then, when you’re done, all you have to do is come down here copy your code, paste it into your Squarespace CSS editor and you have a background gradient created pretty much for you. So the last tool I want to share with you guys is keyframes app, and this is a really helpful tool for creating CSS animations. So all you have to do is come to keyframe, shot.
App click use the web app and you get this helpful timeline down here, which makes it way easier to create the animations and over here you have all of the properties that can be animated. So it’s just like your basic timeline. Animator down here you have the duration. So how long do you want the animation to be? How many times is it going to be animated, so they have it set to infinite, but I only would want it to be playing once you can set it delay on it, and you can have the timing so Easy’s in he’s out he’s in out or linear.
So I’ll just show you real quick how easy it is to make an animation. So I want to pretend this is going to be my heading and I just want it to fade in and scale up a little bit when the page loads. So I’m going to start it the opacity at 0 and I’m going to come to like 20 % and I’m going to keep the opacity at zero and the reason that I want to do. That is sometimes the page catches a little bit or it takes a little bit longer to load.
So I don’t want my animation starting right from the beginning. I want it to be just at its default position and then start at 20 %. So the other thing that I wanted to do at frame 0 is have the scale will have it be like 80 percent of what it’s going to end up at so here we’re going to want the scale to be also 80 percent and then add a hundred Percent when the animation is complete, I want the scale to be 1 and I want the opacity to be 1 and for the timing, we’ll just see how linear looks so pretty cool, but I want my timing to be ease cool.
So then all you have to do is show the output CSS. You can copy this code, put it into your Squarespace CSS editor and then all you have to do is replace this dot element to animate with the code for the object that you want to animate. So, for example, I could put h1 here in Squarespace and then all my h1 headings would have this really cool animation when the page loads so makes it really really easy to create keyframe animations very quickly, alright guys.
So that was my roundup of the top five tools I use on almost every web design project. Let me know if you’re going to start using any of these or, if you already use any of these in the comments below I’d love, to hear from you guys. Alright guys, I will see you in the next one: