By the end of the 50 screencasts, you will have completed 5 hours of hands-on practice with several pretty blog post layouts under your belt. By then you’ll be comfortable with creating simple yet good-lookin’ web graphics. By then, you’ll know how to install and edit fonts and you’ll know how to add text to your Photoshop documents. You’ll know the good stuff about brushes and patterns, and how powerful blend modes can be. You’ll also know how to create clipping masks and add borders and drop shadows as neat effects to your images. We’ll work with shapes, layer masks, and I’ll show you how to make selections with the pen tool. That’s right: the Pen Tool. And, best of all, we’ll walk through numerous layout examples. The PS I Love You eCourse is smart, concise, well-rounded, and affordable, a class where you can focus and enjoy learning at your own pace in the comfort of your home — just you, your beautiful brain, me, and Photoshop.
I get a lot of questions about how to add margins, remove spaces between things, add spaces between things, add borders, remove borders, make things disappear, and move elements around the page. Along with these questions, people tell me that the whole topic of HTML and CSS is overwhelming. The answers to many of the questions I get can be found in some easy CSS. I created my CSS eCourse to show you that there isn’t anything to be afraid of.
This eCourse is project-based and teaches CSS to beginners who want to have more control over their blogs. You will learn, one small step at a time, how to create a clean and simple blog by using some basic CSS techniques. By the end of the class, you will finish creating this blog.
Have you seen my Micaela Greg post? I'm going to show you how I made those gradients appear on a mouseover with CSS. In fact, I used this technique in another example which features two of my latest acquisitions: this floral top from Zara and these jeans from Saturday (images not used in the project). If this is something you've been dying to do, join me and I'll show you how.
Hey everyone, today’s Style post is about Font Awesome, a free web font with simple and scalable icons. To date, there are 249 icons ranging from retro cameras to briefcases, from cups of coffee to glasses of beer. There are also a variety of medical and social icons. One of the great things about Font Awesome is the infinite scalability of the icons — since we’re dealing with a font, we can make the icons as small or as large as we want without losing quality. And, the icons are editable with CSS. For example, we don’t need image rollovers when designing our social icons anymore. Instead, we can use link pseudo classes to change an icon’s style on a mouseover.
Today’s project was inspired by Frame Magazine. The big draw for me were the layouts with layered photos and overlapping text. Rather than share a Photoshop tutorial on how to accomplish this, I thought it would be more fun to create an html exercise instead. We're going to use all the techniques we’ve learned in CSS Pretty to get the job done.
We're going to convert the Monki-inspired Photoshop layout into a webpage. You might be wondering: we made it in Photoshop, so why are we doing this?
1. It’s common for blogs and websites to start as a Photoshop mockup that will later be converted into HTML and CSS. This tutorial is a simple exercise in the process of taking an image and turning into its web counterpart.
2. Another reason for using HTML and CSS is that you can always change the fonts and backgrounds, and best of all, you can add interactivity between elements — all with simple CSS! And, speaking of interactivity, I’ll show you how to get some cheap thrills by making these chocolates twist on a mouseover.
It’s great to have a variety of photo labels at your disposal. The usual place to put a photo caption is above the photo or beneath it. To put a caption on top of a photo, we’ve been using Photoshop. But, as you’ll see in today’s screencast, putting a caption directly on the photo with regular text can be done easily with CSS.
Here's a screencast to accompany Delectables No. 3. I’m going to show you how I made these pop-out graphics that I used on Pugly Pixel as Reward Style affiliate ads (in October 2012). We're going to use Layer Masks to hide portions of a layer.
Here's a project to accompany the Silhouette Legends tutorial. The screencast is about 15 minutes, and I walk through the process of making selections with the Pen Tool. I also touch a bit on layer masks.