Day 58 – Webinars

Today’s page was about taking a psd file and turning it into code!

I decided to write the css in Sass. I set up sass and got it to watch the precss file for changes. It was fun to try writing in sass but I found I had a lot of ‘nested’ classes which made the resulting css quite bulky. Even after consolidating classes and styles, I still had seemingly repetitive styles for all the different colors. I felt like I was not using the full power of sass. Then again, first page using sass, let’s not get too ambitious here.

As I don’t have Photoshop, I used Pixelmator, a free photo editing tool for Mac. Using the slice tool, I got the background photo image files. Navigating the different layers of the psd file took some clicking and unclicking. I feel like there should be an easy way to select which layers you want…layers should be sorted by the sections they affect!

I did a funny thing with the buttons: from the psd, I got the colors and set the styles individually for the light green and blue buttons. I assumed that the three buttons on the image backgrounds were the ones with less opacity. After setting all the button styles, I looked again and had a moment of realization: the light blue and light green buttons were just white buttons as well. White plus blue equals lighter blue… good old colors.

webinars

Day 58 – Webinars

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s