As someone just learning about this stuff I would like to say, "THANK YOU!" Incredibly fascinating *AND* informative. Love your teaching style, the way in which you articulate these ideas and concepts.
As a graphically trained designer and illustrator, i totally agree with your points on designing in the browser being more "right-brainy"! I've tried a lot harder to develop in the browser only, lately...now I'm re-thinking this strategy. Thanks, Chris!
Thanks for everything you do Chris. I stumbled across one of your videos a few weeks ago and you really inspired me to get into website development. I'm having huge amounts of fun with it and I'm already thinking of starting my own website design firm after I've finished university. Again, thank you!
Pencil and paper is the quickest way to get your mind flowing then move on to what you feel comfortable with photoshow, code, or I usually move to illustrator.. now you can create a lot of the css in the design program.
I mean the generic/geometric "shapes" in general. Those are the Photoshop vectorial elements. These allow maximum potential with CSS Hat to perform it's functions and provide the best workflow. Just use those shapes and the layers styles (double-click the layer to add styles such as shadows borders etc.) and CSS Hat will be able to give you a complete CSS translation of the layer's content and style. Hope that's useful.
Life-saver advice for Photoshop-Webdesigners: Learn to design using the Shapes (vectorial) and style them using the layer styles. If you do this, you'll be doing it properly. Then you can use a Photoshop extension such as CSS Hat, that gives you the CSS for each layer. Shadows, outlines, colors, etc. Then, copy paste into your CSS. I'm not advertising CSS Hat (you can pirate it as well) but this is a life saver for Photoshop users. This can also be done in Fireworks or Sketch 2 without plugins
Ok! Im learning. you dont have to even do the above. 1 create new file, dont bother saving it, instead 2. bring up the control pallet, ie on a mac cmd+shift+p 3 type ss -this is for Set Syntax, followed by htm 4.in the drop downs you will see html, select that. bingo. your unamed, unsaved file is now set to use html5 syntax so when you enter html:5 and TAB the editor knows what syntax your on about and can apply the correct Emmet thing to it. Happy days :)
1. create new file and save as .html extension 2. type html:5 3. hit TAB button you have to save the new,blank file as .html extension FIRST for this to work, so that it knows its a html file and so can then apply html autocomplete. I had to rewind the vid a few times and play myself till I got it too :) tada, auto complete.
Hi, I'd suggest to use CSS Hat Photoshop plugin to export layer properties and effects to CSS, as many of them are directly transferrable. PS: I'm one of the developer of CSS Hat.
Thanks for posting this! But one question...Doesn't anyone start off with sketching on paper anymore? I've noticed that for all but the most talented designers, starting with Photoshop, can create some very sterile looking concepts.
I super enjoyed this talk and a look into your brain a little! ...However, one thing that drove me nuts: it sounded like you were going in and out from the mic over and over and over so the volume would go up and down as if you were rocking back and forth. Really distracting! Otherwise, fantastic video and love your site!
I'm still editing commando style, but i really want to get out of it. I find it hard to understand how it will work with for example Wordpress sites. Do i store the entire installation on Github? How about the database, that must be in sync as well, because there are plugins and stuff. Oh, and plugins!? They can be updated through WP Admin, so how do i keep that in sync? I'm eager to understand how this works, i would very much appreciate a screencast of that - or just an article, or something!
The video is just too blurred that I find it dificult to read what is written in it. Please try uploading a more enhanced video as you are doing a great job helping people like me. Thanks
> That they are ungrateful and killing our people that´s racism but wtf does that have to do with him and his ethnicity? if some random ass dude that happens to be the same ethnicity as me beats someone up on the other side of the world, it's my fault? lol idk why I'm even responding to this
Hell now. You got it worng G. Its just a question. I am Turkish and Jews can tell you that we Turks saved them many times in the history. That they are ungrateful and killing our people that´s racism :). Go take some history lessons.
Наука
As someone just learning about this stuff I would like to say, "THANK YOU!"
Incredibly fascinating *AND* informative.
Love your teaching style, the way in which you articulate these ideas and concepts.
Read SASS support on the website and leaped for my credit card, you are a divine light to my workflow!
As a graphically trained designer and illustrator, i totally agree with your points on designing in the browser being more "right-brainy"! I've tried a lot harder to develop in the browser only, lately...now I'm re-thinking this strategy. Thanks, Chris!
Thanks for everything you do Chris. I stumbled across one of your videos a few weeks ago and you really inspired me to get into website development. I'm having huge amounts of fun with it and I'm already thinking of starting my own website design firm after I've finished university. Again, thank you!
Thank you Chris! This lesson is exactly what I need.
I wonder how much of your workflow is changed by now, if any? And what is new in your approach
it feels a great passion in your voice. it's a joy to listen such enthusiastic speaker:)
Pencil and paper is the quickest way to get your mind flowing then move on to what you feel comfortable with photoshow, code, or I usually move to illustrator.. now you can create a lot of the css in the design program.
You converted me from working directly on my server... just bought Sublime Text 3, and I am going to be using pre-processors now. WEBDEVELOPMENT!!!
awesome!! thank you for uploading this in 2013
"It's like my fort as a nerd, kind of."
Best line ever.
Thanks for sharing. Great way for me to find out about new tools.
"In photoshop text just looks like a bummer" I had a good chuckle at that. It definitely sucks for text and having half pixels.
video changed my life...thank you.
Awesome!!! I have learned so much! Thank you so much!!
I mean the generic/geometric "shapes" in general. Those are the Photoshop vectorial elements. These allow maximum potential with CSS Hat to perform it's functions and provide the best workflow. Just use those shapes and the layers styles (double-click the layer to add styles such as shadows borders etc.) and CSS Hat will be able to give you a complete CSS translation of the layer's content and style. Hope that's useful.
You finally convinced me to use SASS.
Loads of useful stuff! THX
Life-saver advice for Photoshop-Webdesigners: Learn to design using the Shapes (vectorial) and style them using the layer styles.
If you do this, you'll be doing it properly. Then you can use a Photoshop extension such as CSS Hat, that gives you the CSS for each layer. Shadows, outlines, colors, etc. Then, copy paste into your CSS. I'm not advertising CSS Hat (you can pirate it as well) but this is a life saver for Photoshop users. This can also be done in Fireworks or Sketch 2 without plugins
Ok!
Im learning.
you dont have to even do the above.
1 create new file, dont bother saving it, instead
2. bring up the control pallet, ie on a mac cmd+shift+p
3 type ss -this is for Set Syntax, followed by htm
4.in the drop downs you will see html, select that.
bingo.
your unamed, unsaved file is now set to use html5 syntax
so when you enter
html:5 and TAB
the editor knows what syntax your on about and can apply the correct Emmet thing to it.
Happy days :)
I do both, as it is good to stay on top of your skills. And when you can't create things they way you want with one then you can use the other.
awesome stuff brah, got lost like halfway through it though...I'll definitely come back to it when I'm more advanced
Good stuff I was able to reaffirm some of workflow we use and see other tricks I can add to it.
Thank you Chris.
Cheers! One thing though, you CAN deploy with git, and it's pretty neat actually
1. create new file and save as .html extension
2. type html:5
3. hit TAB button
you have to save the new,blank file as .html extension FIRST for this to work, so that it knows its a html file and so can then apply html autocomplete.
I had to rewind the vid a few times and play myself till I got it too :)
tada, auto complete.
I enjoyed it, thank you
Hi, I'd suggest to use CSS Hat Photoshop plugin to export layer properties and effects to CSS, as many of them are directly transferrable. PS: I'm one of the developer of CSS Hat.
CSS Hat rocks :)
Thanks for posting this!
But one question...Doesn't anyone start off with sketching on paper anymore?
I've noticed that for all but the most talented designers, starting with Photoshop, can create some very sterile looking concepts.
What do you mean by "the Shapes"? Do you mean just generic/geometric "shapes" in general? Or is "the Shapes" some sort of addon or function?
very usefull... tanks..
960 px is a good width for webdesign? (or online shop design.. ebay and so on...
at 1:10:27 almost got fired for laughing so hard xD, good vid good vid.
Sooo long but worth it.
Thanks!
I super enjoyed this talk and a look into your brain a little! ...However, one thing that drove me nuts: it sounded like you were going in and out from the mic over and over and over so the volume would go up and down as if you were rocking back and forth. Really distracting! Otherwise, fantastic video and love your site!
I'm still editing commando style, but i really want to get out of it. I find it hard to understand how it will work with for example Wordpress sites. Do i store the entire installation on Github? How about the database, that must be in sync as well, because there are plugins and stuff. Oh, and plugins!? They can be updated through WP Admin, so how do i keep that in sync? I'm eager to understand how this works, i would very much appreciate a screencast of that - or just an article, or something!
how did u create html5 skeleton atomaticaly in sublime?
well, in the end, end product justify the process
The video is just too blurred that I find it dificult to read what is written in it. Please try uploading a more enhanced video as you are doing a great job helping people like me. Thanks
Clean your fucking screen.
Osayande Davidson well it has 1080p so...
Misophonia trigger warning 0:16:58
flat style i hope
> That they are ungrateful and killing our people that´s racism
but wtf does that have to do with him and his ethnicity? if some random ass dude that happens to be the same ethnicity as me beats someone up on the other side of the world, it's my fault? lol idk why I'm even responding to this
Hell now. You got it worng G. Its just a question. I am Turkish and Jews can tell you that we Turks saved them many times in the history. That they are ungrateful and killing our people that´s racism :). Go take some history lessons.