GS Web-design Blog

Webdesign Developement and Mantainance


September 2015

Being Smart at Photoshop

Hello Humber bloggers and other followers!

It took me some time deciding what to write about this week.

But then I decided to write about what surprised me the most which is…

Smart objects on Photoshop!

They are saved inside your PSD Photoshop file as a separated file (.PSB).

Why to use smart objects?

Smart object is great because you can resize it without getting it pixelated.

You can make changes on a smart object and automatically update all its linked instances.
This is great when you are designing a website. Or even when you have different projects involving the same image. Per example, you change the .PSB logo image and get the logo changed simultaneously on your flyer, website and newsletter. Awesome!!!

A great idea is to try various designs on your project with placeholder images and later replace with final versions.

Embedded Smart Objects

You can place an external file as embedded s Smart Objects.
It’s better to use PSD, TIFF, or PSB files because you can add layers and modify pixels without loss. That doesn’t happen with JPEGs…

Per Example…

Screen Shot 2015-09-24 at 4.01.05 PM

This is a cool example we got in class that shows how to change logos on different images. Let’s say you need to use a different company logo.

So, if you have the logo as a Smart Object with different layers on it. Each layer with a different logo. Open that smart object (double-click that layer), hide that logo, and makes the other logo layer visible.

Screen Shot 2015-09-24 at 4.12.34 PM Screen Shot 2015-09-24 at 4.14.03 PM

Save that PSB and take a look at  the PSD file again:

Screen Shot 2015-09-24 at 4.14.40 PM

As you can see, just like that you got all the logos changed at once!


CSS3: rule over rule

This week I learned something very important about CSS3.

When you write a CSS code, a rule can ‘rule over another rule’. So the style you give to an attribute (id or  or class) of a tag  will be prioritized over the way you style a tag itself.

What? Yeah… I will explain with an example!

Let’s say you have styled the color of the links on your page using this rule:

a {color: blue};

And you have a navigation bar with links on it (obviously…) And your navigation id is “site-nav“.

Then you decided that the links on the navigation bar should be a different color from the other links on the website.

So you write this CSS rule:

#site-nav a {color: white};

This rule makes the elements with the id “site-nav” WHITE.

And just like that the links on the menu will now will be white instead of blue! Wow!

See… That’s what I meant when I said that “a more detailed tag (#site-nav a) will be prioritized over the way you style a single tag (a)

Now you can style miracles on your page!

First week back to school…

After years being away from the Design industry,  here I am.

Getting back has being a surprise each day. So many things changed in 10 years! Yes… ten years that, for personal reasons, I had to stand back for a while. But it passed fast… and thankfully I am getting back on track.

I am old school on Web. And back then I used to focus mostly on the front-end of my websites. How I loved to design the pages on Photoshop, slice them up and just add some content and links on my HTML.

But things changed and beyond other things websites had to be less heavy to load, semantically correct and easier to change things up.

So here I am learning the new ways to design a website… using HTML5, CSS3 and JavaScript.

My first week was very exciting.  I chose the Web design, Development and Maintenance program at Humber College to help me upgrade my skills so I can build up a nice Portfolio and get back to work as a Web-designer.

We already learned some HTML5 and CSS3 basics. I also had a quick tutorial on how to use Adobe Bridge CC and started a blog using WordPress (yes, this blog).

I hope to make this blog interesting and useful for new web-designers, specially my Humber classmates.

Feel free to comment with your insights and feedback 🙂

Create a free website or blog at

Up ↑