Dear Steemit Diary: The one where I win | Day 3 of 365 days of My Creative Journey | @Kawthar

in steemit •  8 years ago  (edited)

Dear Steemit Diary,

dear steemit diary 4.png

Warning: This post features at least 5 winning discoveries that I made today. Read at your own risk.

Today's goal was to design Previous/Next post buttons for this Dear Steemit Diary series. Being that I'm still a newbie Steemian, I wasn't sure if such a thing was possible on this site. I figured if I design an image and then make it clickable then that would do the trick.. It took some tinkering, but I got it to work! A win!

Some Design Stuff:

First, I fired up photoshop to tinker around with some design ideas. I am not the type of graphic artist that is an expert at logos and banners and the like. I have so much failed experience with not getting those things to look right that I wasn't actually looking forward to this part. However, being that I totally don't have the ability to commission out this task, it was up to me to figure it out.

Screen Shot 2017-06-04 at 12.58.31 AM.png

I browsed the different text options(and also downloaded a few new fonts) until I kinda got some that matched the idea in my head. The Bodoni Ornaments text is all characters, so I figured it would serve as a nice flourish aspect for my buttons. I knew that I wanted to space the buttons out at bottom corners of each post. So that is how I set up the flourishes as a test image.

Some Technical Stuff:

Screen Shot 2017-06-04 at 12.50.59 AM.png

At first I couldn't figure out how to make image clickable. So I figured I had to just make a clickable link with the title "Yesterday" and revise my idea by making the flourishes an non-clickable accent image to the link.

Screen Shot 2017-06-04 at 1.00.38 AM.png

It looked O.K. ish. But it needed some more "oomph" if it was just going to be an accent picture. So, I added a second copy of the image above the link in the link thinking that I would sandwich the link between the 2 images. When I did that I inadverdently made the picture clickable!!! Victory. Was. Mine. (WIN!)

Screen Shot 2017-06-04 at 1.02.05 AM.png

I was so excited!! I was then able to delete the separate link title text and just have the clickable image. This allowed me to go with my original idea of a completely custom link.

More Design Stuff:

I knew from the beginning that I wanted to do watercolor buttons. Because they're pretty. And cliche. And pretty. And I'm still new to branding design, so I'm just going with what I've seen that I thought looked cute. mmmkay?

Screen Shot 2017-06-04 at 1.31.51 AM.png

I found a tutorial on youtube that showed how to make text look like watercolor. That was my original plan, so I googled for royalty free water color stock images. I poked around on a site called pixabay until I found the image shown above. It was totally perfect and because it was already water colored and in the "flourishy" shape, I didn't have to use any text overlays. Which meant less work for me. W.I.N.

After a couple more hours, much trial and error, and research, I finally made 2 clickable images. Voila!!

yesterday.png tomorrow copy.png

WINNING

They are not perfectly scaled so I might revise them a little bit more before settling on them. But I am super happy with how they progressed. They captured the vision I had in my head so well.

If you have read this far, I hope you enjoyed this post. I'm creating a whole series dedicated to Steemit blog branding and layout design. If you're interested in that don't forget to follow me.

Until next time,

Peace,

Kawthar

P.S. Today is day 4 and this post is for day 3 but published on day 4 but written on day 3 so it is still day 3s post. So I technically haven't skipped a day yet. So yes, another win.

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Love your work, love your energy even more. How fun (:

Hi Zacharius, Thanks for your feedback!

So cool, now can make clickable images in posts! You essentially just put the brackets around the image instead of a word, right? It's sounds logical, but I never knew. Now I do, thx @kawthar

Same! I never knew either(I also didn't know how to post links on here, Im a noob). Yes put the pics in the [] brackets. Glad it was beneficial!

Wins, even technical, a always good!

I agree. Love me some accidental discoveries.

I love your point of view in the P.S. section. Could be my own :-D
So I hope you don't have to write day 4 post on day 4 but publish it on day 8? ;-) Looking forward to it!

Haha! Fingers crossed that day 4 will be published sometime today!