Exporting CSS from Photoshop

This lesson is exclusive to members

Course contents
SECTION: 7
Color 3:42
SECTION: 10
Page adjustments 1:28

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

49 lessons / 3 hours

Overview

Web design skills are one of the most employable opportunities of our lifetime. In this course you’ll learn how to design a professional website in Photoshop. We’ll start right at the basics of Photoshop and work our way through to building professional website concepts.

I created this course for people new to the world of website design and Photoshop. I created this for people nervous about changing their careers into the world of web design.

You’ll learn how to design desktop, tablet and mobile versions of your website. You’ll learn what types of files and code are required at the end of your job. This course is for people serious about making money as a professional web designer.

Now let me help you earn more money, get that job and become more awesome!

What are the requirements?

  • You'll need a copy of Photoshop CC 2015 or above. A free 30 day trial can be download from Adobe here.

  • No previous Photoshop or web design experience is necessary.

What am I going to get from this course?

  • 49 lectures 3 hours of content!

  • Forum support from me. 

  • All the techniques used by professional website designers.

  • Ways to preview your designs straight to your mobile device.

  • Firm understanding of responsive web design.

  • Professional workflows and shortcuts. 

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

This course is for beginners. Aimed at people new to the world of web design. No previous experience is necessary. 

This course is NOT suited to people highly experience in the world of website mockups in Photoshop already.

Course duration 2 hours 43 mins

Get the completed files here
Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Download Exercise Files

Transcript

Alright , in this video we're going to look at how to get something called the CSS out of your document . The web designer is going to say what colour is this,what sizes is this,what font is it ,whats the spacing between the lines. And you could go through with your type tool and write them all out and explain what they all are. A nice little helpful thing you can do to make it a little easier for them is to export the CSS.

Now lets say that they want to know what font this is and what font size it is . So what we can do with my curser I can find it in my , there he is WHO WE ARE ,Theres one in here that says copy CSS. If I copy CSS nothing seems to happen. Ok , what its done is its copied it to your clip board like you've gone to edit copy. Now you can open up any text editor ,word or chuck in an email and hit paste..And what its done is that its set.Its created this class along the top there,which we probably don't need and its got a lot of the important stuff like font size , font family ,font colour the font weight the line heights ,ok whether thats centred and this type of thing ok position ,left ,top . Send it to the developer anyway they'll probably going to ignore all this and if you are a web designer you'll just know what to pick out of this and what you don't need .

Now I could explain to my web developer that the Hero Heading text is this and they'll be able to use their magic web design skills to style their text to make it match exactly like your photoshop mock up. Ok so lets look at for doing some of the structured parts like this navigation box at the top.Cause what we need is maybe the height and we need what colour it is and what the alpha transparency is or the opacity is. So I'm going to select them as my nav bar , I'm going to go up to layer , I'm going to go to copy CSS and I'm going to jump into note pad and this is going to be my nav-bar and I'm going to hit paste. Theres bits that their going to use and bits that their not.If your not a web designer and you have know idea what this junk is , just send them the whole lot and they can pick through it. I know that we don't need the class and we'll use the back ground colour,we'll use the opacity but we don't need any of this. But we do need the height ok.So those are the things that I'm probably looking for as a web designer that I need to go and style to make sure its the same and it just takes a lot of the guess work out of me as a web developer to say ooh ,its about that high and ooh its about that transparency and to send it back to you as the designer for you to come back and say,hey its not the right one and lots of two ing and fro ing. This will help remove a lot of that.

And thats one of the nice new features in photoshop CC. If your using CS6 or CS5 , unfortunately its not a feature for you .Your going to have to do a lot more of the two-ing and fro-ing and typing out and explaining what the font is,what the font size is.what colour it is what the opacity is and labelling that out for them. Or if they have some photoshop skills themselves they can go into it and do it

Alright thats exporting CSS from photoshop .

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024