Not too long ago, I posted 3 different, working templates for a new DeskMate logo I had been designing for my wife’s Virtual Assistant business, and now I get to show off the final versions that were born from those collages. After slimming down all of the choices I had created, we both agreed that this version – with the more blocky, serif font and stylized envelope/letter “M” – captured the essence of what DeskMate was all about. The colors we decided upon were taken from the color palette we had already finalized with her last website icons that were created, keeping the same light blue and gold from those pieces, and implementing solid black wherever appropriate.
The reason for multiple “final” versions of this logo was so she could use them amongst different backgrounds, websites, etc. Even though this might look simple (which is is), I am proud of this design. I have had my hand in several projects before, but none that called for subtlety over flare, and I was thrilled to be able to stretch myself to be able to create something that is both easy to look at, but has a double-meaning hiding in plain sight. I hope she is able to use these logos as much as possible, and that it helps her business garner even more clients in the near future!
I have much confidence in my wife, and in any endeavor she puts her mind and little heart to, so I thought I would keep helping her with her VA side business as much as I could. I had already created some icons to encompass the feel of her business, a simple logo that went along with other icons I had created, and then I animated said icons so that they could be used as an interface for the homepage of her newly-created website. So now, using an initial idea that Aeowen had given me, we wanted to create a newer logo, a simple yet effective one that could be used for both printed and digital means.
The three different collages of images above are the steps I took in reiterating her idea into reality. The first collage had to do with the centerpiece of the logo, transforming the letter “M” into a envelope (which had been used on the first icons I made for her) using negative space in a clever way. As you can see, I created several versions of the stylized “M”, and eventually showed them to my wife, in which she decided on a few of them to be experimented with for the next step.
The second phase of this project had me implementing the actual name of her business – “DeskMate” – alongside some of the different “M’s” I had created, prior. I attempted to create 5 different versions of this logo, at this point, making sure the two different fonts we had chosen went along with the “M’s” that was agreed upon. Eventually, after taking a look at what I had done, she ended up boiling her choices down to two somewhat different styles, and then I created 5 variants of each, hoping to capture the look and feeling that was in her head within at least one of them.
We have, at this point, already figured out which ones out of the last collage above seemed the best of the best, and I will be posting about them in the near future!
Alrighty, for those that have been keeping up with my posts about the various DeskMate VA icons I have been creating, here is the last animated .gif I worked on for Aeowen – the client in question. Other than the nameplate icon I posted about not too long ago, this is also another center piece for the homepage menu we are putting together.
Compared to the other .gifs I made, this one definitely took the most time to translate from my mind to the digital screen. As one can see, not only did I animate the Start menus (in Windows 10 style), but also gave the illusion of a rotating world as the background image. There were two ways I could have gone about creating the illusion of a spinning Earth, and of course, in typical Ronin Yeti fashion, I took the hard route, haha. My wife even came up to me after showing her this, asking if I had created a masking effect on the circle of the planet, to show off a sort of panning world behind it. Sadly, I had to tell her “nope,” and that the way I got this to work was I literally moved the green landmasses about 5 pixels to the left, deleted what was falling off the left side of the circle, and drew onto what was supposed to be showing up on the right. I did this over and over, frame by frame, until I was back to the first frame of landmasses, again. Suffice to say, I could have made this project a lot easier on myself, but I’m a stubborn person, and only the harshest of lessons seem to take root in my mind.
I hope you all enjoyed seeing the whats and hows of my first set of animated .gifs from scratch. Considering I feel I did pretty well with these, I might consider stretching myself and making even more, for different reasons, clients, whoever/whatever!
I am almost done blogging about the various icons I have created for the upcoming DeskMate website, a place to get all of your Virtual Assistant needs! The .gif above is the second-to-last one I worked on, and was, by far, more challenging to animate compared to the others I have shown off. For this icon, I couldn’t simply take parts/layers of the original image and manipulate them like I had with most of the others. Instead, I would have to take perspective into consideration, and create some new pieces (specifically talking about the different views I’d need of the cover of the binder) that would help convey a smooth transition between the frames.
I have never really animated anything like this before, having to actually create frames that used assets that weren’t from the original design, and found myself pleasantly surprised at the simple, yet convincing outcome of an actual binder opening and closing. Here soon, there is one more animated icon to discuss – it being the most challenging one to date – and I can’t wait to show if off to you all!
Onto, yet, another DeskMate homepage animated icon, however this one is a bit simpler than the others I’ve shown so far. What you see above is the center piece of the entire homepage, and is supposed to have (as you might have seen in a previous post) the rest of the animated icons surrounding it, yet again, signifying the importance of what the icon says, and what sub-page it should lead to (which in this case, I would assume would be a Contact page of sorts, or perhaps an About Me page).
Instead of trying to capture the feel of some of the principles of animation, I wanted to simply have a cute, yet somewhat impactful animation for this one (that, and you can’t animate a hunk of wood and metal in too many realistic ways). Considering one of the colors for the 4-color palette we chose is gold, I wanted to compound that idea and give this piece a shimmer on some of the golden areas, scaling up and down a simple, 4-pointed star on various parts of the icon. I think this turned out nicely, and Aeowen – the DeskMate client in question – simply adored it, per usual.
Now back to even more animated icons from the DeskMate website’s homepage! Compared to the others I have shown off so far, this one required some editing of specific parts of the image, itself, so I could articulate the motions of an actual stapler. I basically split up the different sub-layers of the image into three main layers for animating – the base, the top, and the inner piece. Instead of simply using rotation and basic movements like with the other .gifs, I wanted to make this particular piece look like it was actually trying to staple something together.
With some important key frames created, and adding in some tween frames in between them, I came out on the other end with what you see above! Even if a little “abrupt” at times – in regard to some of the inbetweens – I feel like this icon gives off a realistic feeling of weight and has a solid and smooth action of stapling. One other thing to mention, most (if not all ) of the other DeskMate homepage .gifs I’ve posted has had the same color palette – with whites, grays, and some minor color differences. Like with the business pen, this icon – and the remaining ones I will be posting about soon – will be, instead, using both black and gold, to help give off an air of professionalism and sophistication.
Here is, yet, another animated icon I created for my wife’s VA (or Virtual Assistant) endeavor, to be used on her homepage for her business’ website. Again, like with the others I’ve posted about, I tried to challenge myself with varying principles of animation, and how Photoshop makes .gifs, in general. for this business pen, I was either going to have it stand straight up, acting like it was writing below itself, or simply have it go in a couple of circles, mimicking momentum and velocity. I would have loved to do the former, and I might be doing that regardless, down the line, if certain icons don’t really match the pages they take the viewer to. So, instead, I chose the latter, and decided to fool around with the illusion of physics affecting this 2D object.
There really isn’t much more to say about this one, in particular, considering two of the other animated icons also use rotation as their main means of animation. However, like I said previously, I wanted to see if I could truly capture the feel of weight and speed of an object, and for a first try, I don’t feel it’s half bad!
Now back to more animated DeskMate homepage icons, of which I present the pencil holder .gif! Considering the other .gifs I’ve posted so far have been relatively tame in an animation sense (except for the paper stack one – which was still somewhat simple to create), I eventually wanted to challenge myself further. Rather than simply making something do a circle or changing up movements slightly with each frame, I wanted to test myself to see if I could animate using some of the principles of animation created long ago.
Taking into consideration the slow in and slow out method and also some basic timing, I wanted to create the illusion of pencils bouncing up (off of their erasers), and then falling somewhat slowly back into place. To achieve this, I had to take each pencil, and firstly animate them jumping up into a pose. To create the faster movement of them jumping up, less frames were used for each pencil. To create the slower movement of them falling back into place, I used more frames for each pencil, putting them back into place where they first began.
I realize that the above example might not be the best presentation of the two animation principles I brought up, but considering this was my very first attempt at using them in a 2D manner (typically I’ve only used animation principles while animating 3D models – which is probably a bit tougher considering they have 3 axis compared to the 2 I’ve been working on with these icons), I believe this animation turned out pretty swell. I do plan on going back to each .gif down the road and revamping them, but for now, this will do, pig.
Continuing on with even more DeskMate animated icons I have created recently (in an attempt to help my wife with her side business’ website), I would like to present you with this new one! With each icon I wanted to challenge myself differently (mostly because I’ve never animated in this way before, and have never created .gifs based on my own graphics). With the first icon I posted not too long ago, I just used basic rotation on the flower, going at 15 degrees every frame. With the second icon, I also rotated a certain part of the icon (the swirling cream), but also messed around with scaling for the heart, to create the illusion of it beating. As for this third icon I worked on, I thought I’d try actually animating the pieces, one frame at a time, one piece at a time, and not just do a simple rotation or transform movement.
What you see above is what came out of this newest challenge, and I think it turned out pretty nicely. The only drawback to this icon being used in the website, is that, for now, it doesn’t loop its animation. I was playing around with different export settings with each of the icons – to learn more about .gif creation – and I just so happened to export this one on one loop (considering the animation itself is about organizing). I am more than likely going to go back and make it to where the last few frames show the papers being scattered out to their original points, to have the .gif infinitely loop, making the stack of papers constantly move around like the other icons seem to do.
*(I have updated the above .gif with a few more frames, so that it now seamlessly loops infinitely.)
In one of my previous posts I began to talk about how I’m in the midst of helping my wife with her VA (Virtual Assistant) website, designing and helping create an interactive homepage with animated icons to help navigate through the rest of the site. Based on her business card that she is planning on printing this summer, her homepage is made up of a single, wooden desk with various icons spread across it (like a laptop, the flower pot I posted earlier, this coffee mug, and others I will be posting in the future).
What we are hoping to do (with the help of a programming friend that helped with some of the indie games I worked on in 2017), is to have each icon on the desk be interactive (by either hovering over it with a mouse, or by simply clicking on it – which depends on what device it is being viewed on) and take the viewer to designated pages depending on which icon they chose to interact with. Each icon is supposed to invoke some sort of subconscious (or even somewhat conscious) feeling that will let them know what information might lie behind the use of each, but we are also considering having words pop up, to accompany the animations of the icons.
As for this specific icon, every business women (and man, apparently) must have an injection of energy somewhere close by. Considering coffee is the universal drink for such a desire, I thought I’d create a coffee mug with swirling cream and a beating heart, to help solidify the feeling of energy and warmth (which Aeowen, my wife, has in spades). Which page this icon might lead to is up in the air, at the moment, but once all of the icon .gifs are created, we will decide what icons would be best for which services/pages/etc.