Reviewing Sass, a Dynamic CSS Language
Jan 27, 2010 by Victor Murygin | Design, Tutorial, Web DevelopmentDynamic features such as Variables and Functions in CSS have been a hot topic of debate for a while. On one hand, programming-oriented people have been begging for these to be included in the next CSS installments, while countless others are pointing out the difficulties of including these inside CSS rules themselves. One of the main arguments against the Variables use is that it will be much harder to learn and decipher other people’s CSS if developers start naming their own variables for everything.
However, I think languages like Sass make a great compromise. Sass is a higher level language floating above CSS that allows Variables, Mixins (aka functions) and more readable code, while spitting out regular CSS code in the front-end. Visitors to your site can still see regular CSS code, but you can organize it by using a higher level language like Sass on your end.
Here are some of the main ideas behind the Sass language:
table
padding: 2px
td.p
text-align: left
#content font: family: serif size: 1.1em p line-height: 1.5em
This would generate the following CSS:
table {
padding: 2px;
}
table td.p {
text-align: left;
}
#content {
font-family: serif;
font-size: 1.1em;
}
#content p {
line-height: 1.5em;
}
As you can see, the Sass version groups and nests elements for easier readability and less size.
Define Variables in the beginning, like this:
!fontColor = #333333 !padding = 8px
You can then use these variables going forward like this:
#content
color = !fontColor
padding = !padding
p
padding = !padding / 2
If you’re not familiar with variables in programming languages, the main advantage to using variables is to define them once in the beginning and then use them throughout the code. This is useful if you are using the same colors or spacing sizes over and over. Later down the line, it makes it easier to just change the value of the variable in the beginning, than to change 20 different CSS rules.
Also, as you can see in the above example, Sass allows you to use basic math functions for further customization.
Mixins are equivalent of functions in programming languages. While variables let you reuse one property at a time, mixins lets you reuse whole sections of the code at a time.
First, you define the mixins like this:
=tableDesign
table
th
text-align: center
font-weight: bold
td
text-align:left
font-weight: normal
or even specify arguments:
=left(!space) float: left margin-right = !space
Then you can use mixins like this:
#content +tableDesign +left(5px)
This will produce the following CSS:
#content table th {
text-align: center;
font-weight: bold;
}
#content table td {
text-align: left;
font-weight: normal;
}
#content {
float: left;
margin-right: 5px;
}
Overall, Sass gives you a smaller, more readable code, as well as the power of reusing code with variables and mixins (something many developers have asked for) while at the same time spitting out regular CSS code in the end.
Now, there are still some issues of using these higher-level languages, and I just want to point a few things out.
1. Don’t use these languages unless you know how CSS works inside and out.
I wouldn’t advise for someone new to bypass CSS and just start with a higher level language like this. You should really know what goes on behind the scenes, similar to how Dreamweaver and other WYSIWYG tools can be detrimental if a person doesn’t know basic HTML or what goes on under the hood. However, if you know how to code HTML by hand and know how Dreamweaver works, you can use it to your advantage for HTML content formatting to save time. Similar rules apply here.
2. It may get slightly problematic if you’re sharing your work with other people.
If you’re a sole developer, you should have no problem using your own code. Even if you work within a team of developers, I believe Sass can be utilized for everyone’s benefit. Even though some may loathe the idea of learning yet another language, if you know CSS and basic concepts of variables and functions, this should take you about 5 minutes to pick up. If you’re not familiar with programming concepts of variables and functions, it may take 20-30 minutes but overall this should be easy to grasp for a developer.
The only way this may cause problems is if you’re sharing your work with other developers, or if you’re transferring your site to another developer outside of your team and they just don’t want to deal with anything new.
3. While Sass seems to be a relatively supported language, beware of others that may be more buggy.
As far as I know, Sass seems to work just fine. However, there are many other dynamic languages and implementations out there without any standards or support. It’s important to do your research and beware of buggy platforms. You want to use these languages to simplify your life. If the platform itself is buggy (i.e., generates wrong CSS code at times), there is no point of using it, as it will cost you more time and headaches.
Other Platforms and Examples
Sass runs on Ruby. I don’t believe they have made it to work on PHP yet, but here are some other dynamic CSS implementation examples:
- xCSS framework – This is an object-oriented CSS framework that runs on PHP5 and has limited overhead.
- “Supercharge Your CSS with PHP” tutorial – Even though I’m not too crazy on this one, as it does not make the readability better, you can basically use PHP to dynamically write to CSS.
- Variables in CSS – Here’s another way to introduce variables in CSS via PHP. I find it better for readability than the above example. Although this one still doesn’t have the Nesting or Mixins ability like Sass. It is also developed by one person without any community support.
Who knows, perhaps in the future Variables and Functions will become part of the next CSS standards. But for now, these higher level languages can be useful in the right hands.
If you have any other good dynamic CSS implementations, please feel free to share!
Bookmark this post:
Rewind to Fundamentals: The 10 Best Ways to Find the Perfect Image for your Blog Post
Jul 8, 2008 by Patrick Winfield | Blogging, Design, Tutorial
Images are an important way to add that extra kick to your blog posts. They are often the first thing that attracts visitors to read further. But where do you find good image?
After completing your masterpiece, you begin to search endlessly around the internet for an image that depicts the core message of your post. When you finally find that perfect one, it is locked up in licenses and conditions that require a lawyer or a credit card. You are obviously frustrated and find yourself spending more time looking for another image than writing that post. Let’s explore some resources that will help you find that image!
Stock photography sites require a paid subscription and offer many choices and sometimes the best results. It can also be the most played out, overused, politically correct looking fluff out there. However, there are so many sources available, from the super expensive sites like Getty, to the middle of the road places like Shutter Stock and iStockPhoto.
Creative Commons is a tax-exempt charitable corporation that works with artists to set various licenses for their work. They search various places like Flickr, Google, Yahoo, etc. For these ‘free’ sites, you will usually need to attribute the work in the manner specified by the author or licensor. No matter which sources you use, it is important to credit the image. If possible, you should also attempt to inform the authors that you used their work and provide them with a link.
Here is an cool introductory video on the basic idea behind Creative Commons called “Wanna Work Together?“.
FreeFoto.com is another great resource that uses the Creative Commons license. You can only use images in an online setting, and must provide attribution and a link to either the photo or the site. Stock Exchange also allows you to re-use images available on the site. It offers more than 100,000 free images taken by amateur photographers around the world. Due to the overuse of the site, Stock Exchange can be a little slow.
National Parks Service Digital Image Archives has some beautiful nature images that are all free to use. The images may be used without a copyright release. Need a great shot of the Grand Canyon, a landscape or a mountain vista? This is a great resource for those types of images. I used a picture from here in the title graphic to incorporate it into my theme of the ‘wild west’ of internet imagery. 
Public Libraries such as the New York Public Libraries Digital Gallery have some great images that can be used humorously or as historical points of reference. The low-resolution images available on the website are suitable for immediate printing or downloading to provide good-quality reference for a wide range of educational, creative, and research purposes.
Or maybe you need a photo of a chicken or maybe a certain crop? Check out some of the images, offered for low resolution download, on the USDA Agricultural Research Service site.
At Public-Domain-Photos.com , you have access to a collection of general images. Although this site does not offer the best variety, it is worth checking out. You don’t have to license or attribute the image to the original source. Another similar site is Pix, , it is a free ‘image repository’ project (sounds like Napster for photos to me). It allows you to download images without registering. More on the public domain front is Old Book Illustrations.com with a lot of cool woodcuts and engravings for free downloads.
Let’s move away from the web-based resources now and get a bit creative with what we have. Do you own a camera? Digital or film, doesn’t matter. Start your own library of photos! Shoot them on film and scan them in or get a digital CD when you develop them (almost every photo lab will provide this service.) If you need a photo ASAP for a post on video games correlation to obesity in children, snap a picture (with the permission of the parent) of your family member zoned out playing video games. The picture might not look like one from a stock photo site, but that may just be what will make it stand out as original and interesting.
Can you draw? Maybe not so well. How about stick figures? Think about how you can use the skills you have, even if they are primitive, to spice up or add imagery to your posts. It doesn’t have to be comparable to a Leonardo Da Vinci masterpiece, just get an idea across or support the main idea with your drawing. Have fun and be creative.
Still can’t find that image and you need to add something to the post to spice it up? Try pull-quotes. This is a simple way to grab a reader’s attention. By using graphical text, you can offer a bite-sized piece of relevant and thought-provoking information that will ‘pull’ them in for the rest of the ride.
To find that image that correlates with your post, search around the links provided above. You can also be creative and create your own images or photos to use in the near future. There are vast amounts of possibilities out there whether you want to spend some cash or do it on the cheap. Just remember to always read the fine print.
Don’t forget to subscribe to the 10e20 RSS Feed for more great tips and tricks!
Bookmark this post:
Call to Action! Creating Cool Gradient Style Buttons.
Apr 29, 2008 by Patrick Winfield | Design, Tutorial
“Contact Us”, “Learn More”, “Click Here”, “Free Money!”. OK that last one I made up, but we have all seen these calls that ask us to do something.
Calls to action in interactive media are usually buttons or links that begin a process. Making these important calls stand out requires some designing further than, and in addition to, the underlined hyper link.
The text and words used in calls to action are topics of another discussion. For this tutorial I am focusing on the design elements of a graphical button and specifically simple gradients with a 1 to 2 pixel gap from the border created in Photoshop. This tutorial is similar to the previous one on creating cool graphical text, but changing a few things and applying it to buttons.
Step 1.
Create your call to action text on its own layer. I like to use a bold typeface. Sometimes the text will look better if it is in ALL CAPS other times all lower or Initial Caps. This is a matter of design taste and should mesh with the other elements to some degree.
Step 2.
Now that the text size is set we will create a shape on a new layer below the text. The shape I am using is the Rounded Rectangle tool. Make the shape go passed the edges of the text but not so much that the text is lost inside the shape.
Step 3.
Now that the shape is centered underneath the text we need to make a selection of the shape and create a new layer for the gradient.
Go to the shapes layer in the Palette window and click on it, then create a new layer just above it. Now Control or Open Apple click on the shape layer thumbnail in the layer palette window to make a selection of the outline of the shape. Now go to the top menu for Select then Modify/Contract and enter a value of 1 or 2.
Step 4.
With the selection still showing and the new layer selected click on the gradient tool. Select a gradient that is a color in full opacity, white or black, that goes to transparent. Now click on the top and go vertically to the bottom just above and below the selection outline of the shape. That is our gradient layer. I also like to cut the gradient, using the rectangle selection tool, through the middle horizontally.
Step 5.
Making the image, button, obvious that it is something to be clicked is the main goal. Contrast in color plays an important role in this by establishing precedence. If I create a light tan background and then a button on top that is white with gray text, it will most likely be lost into the background. High contrast lights on darks or vice versa are best.
Size is another factor. Making a tiny button with your call to action on it may work for most users that are savvy and looking for it, but don’t eliminate users. Making the calls large enough not to be swallowed by the other elements will ensure it is not missed.
Arrows are design elements that guide a users eye in a particular direction. Using arrows before or after calls to action can help with calls that are not contained within an image.
Additional imagery can help push the idea of the call to action. Imagery can also help with branding and theme of a design. The main purpose would be to keep the button simple and obvious, but including an extra element such as a product can work and make the graphic more appealing.
Don’t forget to subscribe to the 10e20 RSS Feed!
Bookmark this post:
How to Create Cool ‘Graphical Text’ for Linkbait Pieces
Apr 18, 2008 by Patrick Winfield | Design, Tutorial
Last week I wrote about how to create great header graphics for linkbait pieces. Now I would like to go a bit deeper into that and explain how I create graphical text, text that is an image, that stands out and screams to be noticed.
Like the last tutorial mentioned, it is important for your article to have an image associated with the content of the article. When you go on Digg and see a link to a story without an image or photo what do you do? Well, I tend to not click on that story and move on down the line. The same holds true, to some degree, to linkbait pieces and the inclusion of catching header graphics.
For this I want to focus on making the text into a graphic in Photoshop and giving it some sort of simple, easy to do treatment or styling so that it can standout a bit more. We are going to use a few Layer styles and a simple technique to give the letters a bit of depth.
Step 1.
Create a layer that has the text you are going to be using on it. I like to use a large, bold faced font like Arial Bold or Impact. It is also important to think about color and contrast at this point. I created a dark gray background and put the text in white on top.
Step 2.
Create a slight Outer Glow and Stroke on the text layer and. If you are using light colored text on top of a darker background outer glow is the best choice, however if the background is lighter than the text use a Drop Shadow to make it stand out. To create the outer glow and stroke effect got to the Layers drop down menu and the Layer Styles sub menu and select each effect.
Step 3.
With the text layer selected make a selection of the letter forms by using Open Apple or Control and clicking on the layer thumbnail in the layer palette window. This will make a selection of the text. Now go to the Select drop down menu then go to Modify/Contract and enter a value of 1 or 2.
Step 4.
With the selection still active, create a new layer above the text layer. Using the Gradient tool, select a gradient that uses a black to white, color, or just black to clear. Starting from either the top or bottom of the letters create a gradient that you like.
This is one way to add an extra little push to your graphical text when creating linkbait header graphics. The steps are easy to do and require a bit of extra time, but the advantage of having someone stay on your content or intrigued to go further is paramount.
I hope that you can use this simple technique in your next graphic! If you have an idea or something you would like to see covered please let us know (blog [at] 10e20.com). Thanks!
Don’t forget to subscribe to the 10e20 RSS Feed!
Bookmark this post:
Using Pull Quotes & Lift Outs: How to Grab Your Reader’s Attention
Apr 11, 2008 by Patrick Winfield | Design, Tutorial
When you need to focus the attention of the reader to a certain area in the text or story pull quotes are the best method. Pull quotes are small pieces of the story or article that is being repeated and set in a larger size font and placed near the middle.
The idea is to pull the reader in further and also pull text from the main body of text. You have seen these allover, if you read an article online or in print today it may have had a pull quote in it and that may be the first thing your eye went to and read.
Step 1.
First I isolated the text that I wanted to use for the pull quote. I pulled the sentence from the paragraph and brought it into Photoshop. Using a large typeface, Baskerville, I rendered the sentence on two lines.
Step 2.
Stylize the quote. You can create pull quotes in so many ways. One that I like to do is with one large quote mark to the left and under the first few letters. I used a much larger size for the “ and put it on the bottom layer. Then I wanted it to be subtle so I made the color a light gray.
Lift outs are a similar technique but are focused on drawing attention to not just text within a larger body of an article but rather a graphical element or an area of text. Lift outs are less popular than its cousin the pull out but sure enough if something is being explained to you in a document it will usually go to the lift out to be sure you see what it is referring to. I created some lift outs for a post Jake wrote here about going local in Stumbleupon. They are very basic, but get the job done.
Lets say, for example, I want to show how the sidebar navigation on National Geographic’s website and how they order the various options. I want to show that ’shop’ is third from the top.
Step 1.
I need to grab a screen shot of the website and bring it into PS. I want to crop it so that I am just working with the specific sidebar section that I want to bring attention to.
Step 2.
Now since the font in the sidebar is some sort of sans serif (looks like Arial Bold) I can easily enough re-create it. This is a big advantage whenever something needs to be made larger. The other way to do this would be to just scale down the entire sidebar and keep the part I want to highlight the same original size.
Step 3.
This is where I am going to add the graphical element of a box or rectangle underneath the word I just recreated. I am going to use the shape tool and make a white colored rectangle under the word shop.
Then I need to show where this was coming from. To do this I am going to create a new layer under the rectangle shape and then use the Polygonal Lasso tool. From the left side of the rectangle create a triangle that has its point on the origin of the area the word came from. Fill the Lasso selection in with white.
Step 4.
Add any finishing touches like a drop shadow, fade or color, to make it stand out a bit more. To do this I merged the white rectangle layer with the triangle and then applied a drop shadow to this layer through the Layer style options. Here is what my final layers palette looked like before I merged the layers to create the drop shadow.
Both of these techniques are great to utilize when creating how to documents, articles or blog posts. The secret to an effective pull quote or lift out is simplicity. Get rid of lots of excess colors or unnecessary graphical elements, just focus on highlighting the content (text or specific area) and let minimalism work for you.
Thank you to Matt McGee for recommending we do this tutorial. I hope it was helpful. If you have an idea or something you would like to see covered please let us know (blog [at] 10e20.com). Thanks!
Don’t forget to subscribe to the 10e20 RSS Feed!
Bookmark this post:
How to Create Great Header Graphics for Linkbait Pieces
Apr 10, 2008 by Patrick Winfield | Design, Tutorial
For this ‘How to…’ I am going to use a linkbait piece from PC World called 10 Cool Gadgets You Can’t Get Here-Yet. The piece tells about how often the coolest gadgets originate overseas and usually in Asia.
The information is interesting enough to hold my attention and I want to see which gadgets they selected and also find out what it is that I can’t get-yet.
However the main graphic header is obvious and could have been worked on a bit more to capture the interest of those people that may be on the fence about whether or not to read further into the piece. So lets get into how I would have used stock photos and created a more compelling graphic to try and lure some more eyeballs into the piece.
Step 1.
First what I did was find a way to incorporate the idea of the world and how these gadgets are found on the other side of it. I searched for a good stock image of a map, or in this case a globe, with some clear outlines showing Asia.
Step 2.
Then I wanted to show someone who looked sad or depressed that they are on the opposite side of where the electronics are being made. This wasn’t too hard to find this guy staring at a phone, with a search query of “reaching”.
It should look funny, like I am pushing the notion that all the good toys are so far away. It took some isolating various elements of the man, like the hands, and then transforming them with the rotate tool and scale to get the position looking right.
Step 3.
After the image of the person is put in place I wanted to add the phones and other gadgets to the opposite side. I isolated a few of the easier to trace ones and cut and pasted them onto the main image map.
I also duplicated a few of the layers to make it look like there was a lot of things there. This was meant to look like a big pile of toys, just out of reach of our person who represents the people that can’t get them.
Step 4.
Finally, I need to add the text of the title and a few finishing touches. This can be in a simple bold font and made it on top of a dark background color to make it stand out from the main image above it. An effective technique can be to highlight or draw attention to a few key words like ‘You Can’t Get Here’ or ‘Cool Gadgets’.
Overall the graphic took me some time to search for the correct stock photos to use, then isolate the various images that needed to be cut and pasted and finally to render the article title onto it. Now, I feel that the piece would grab even those people that may have been a little hesitant to spend a minute reading into the piece. showing effort on the linkbait header graphic may be perceived as the content being of greater quality than if the header graphic was simply created in a few clicks of the mouse.
Don’t forget to subscribe to the 10e20 RSS Feed!
Bookmark this post:
The Overuse of Stock Photography (and 3 Ways To Avoid It)
Apr 7, 2008 by Patrick Winfield | Design, Tutorial
OK, before I begin let me say that I use stock photography. Stock photos are a great convenience. I sometimes depend on it,
especially in a crunch or when I just need someone smiling and expressing happiness for a call center spot. That being said, there comes a time when stock photography is so obviously staged, politically correct fluff that screams “I am STOCK PHOTOGRAPHY!”
You all know the image, a group of happy employees who all are various ages, genders and races. Everyone is sitting around a desk pointing to a computer screen in some bland office interior.
Sometimes only the top few results are ever used in a stock library search and those photos are everywhere. How do we avoid these pitfalls of overused imagery and photography?
Don’t use the top results when searching. Everyone will use these. Dig a little deeper into the search and find something that is a bit different. There are tons of examples out there today showing the same photo on a cover of a book and than used for another companies homepage.
One famous example from several years ago is used on both a software design book and a feminine hygiene product. It is kind of like showing up to your friends party and someone else in the room has the same exact outfit on. Check out Presentation Zens list of some pretty good free sites to get photos from.
Shoot people (with your camera that is). Find your own co-workers or target audience and get a real world situation. This is a bit harder but it can be perceived as honest and surely unique, or if it is not done correctly it can look cheap. Models are models for a reason, they are either good looking or fit a certain type. Hiring models and shooting the photos in house will ensure your photos are unique, but this is what you are paying for.
I had a friend that found a stock photo of a skinny, middle aged, good looking white guy for his about page on his accountant for hirer site. Almost every client he met that came from his website noticed that he was overweight and balding and asked about the photo, “Is that you on your website?” Not cool. He realized the problem, we shot a simple portrait with basic lights from the office and nobody asked him again.
However if you shoot your own company workers it may be a good idea to make sure that they sign a model release, if they are no longer with the company in the future it may become an issue or you will just have to re-shoot.
Think creatively. If you need to find something from a stock library think outside the box. Maybe even go for the situational shot or metaphors. Do you have a yoga site or how to get better sleep article, use clouds or water, images that evoke a response subtly can be very effective. Also creatively edit the image, crop into it or combine two or more photos together to create a new photo.
Don’t forget to subscribe to the 10e20 RSS Feed!
Bookmark this post:
What is RSS?
An RSS Reader is a simple and easy way to read your favorite news site or blogs. Instead of going out to these site to read the most recent stories or posts, the newest stuff comes to you, all in one simple page. Even more convenient is having a Reader which is online, reaching it from any place in the world.
In my eyes Google Reader is one of the best online RSS Readers on the web. For the first time user, just getting used to the whole RSS thing, this post will talk about: a) How to subscribe to a feed b) view your feeds c) the cool features built into Google Reader and d) just some nifty little tricks you can use while you’re at it. Remember, being a master of your RSS feeds is also a very important way to build up and maintain powerful social media accounts 
The first thing you would have to do, is head over to reader.google.com and sign up for a free account. From there, you would want to start building up your subscriptions.
Subscribing to some of your favorite RSS feeds is simple (here’s 10e20’s feed for example). All you need to do, is go to the blog you want to subscribe to and find the little (or big) RSS button on that page. From there, you will have to Copy that URL, and then in Google Reader you just need to click ‘add subscription’ and paste that URL there. From now on, whenever that site is updates you’ll be able to see the most recent post right inside of (the online) Google Reader. This obviously saves people tons of time when they’re reading over numerous sites daily.
Now that you’re setup with all of your favorite sites, its time to look at what Google Reader is really capable of.
“Tagging” different subscriptions is a simple way to filter out only the sites you want and don’t want to read at any given time. Tagging all your sites having to do with Apple, is a great way to see only the Apple news and keep everything else separated from it. The more tags you have, the easier it is to find what you want to read about. You also have the ability to tag a subscription with more than one tag, if it falls under more than one category.
“Starring” different post is also a key feature in Google Reader. Maybe you want to come back to that post at a later time or you want to show it to a friend. You can then see all the item you starred in the tab called “starred”.
Google Gears is built into Google Reader. What this means, is that you can still view your feeds even after you disconnect from your Internet connection. You can read the latest 2,000 feeds Google downloaded, the last time you were connected to the Internet. This is a really cool feature because you still have the ability to catch up on your feeds even if you’re on an airplane (or a place where there is no Wi-Fi.)
“Expanded view and list view” are two different ways you can read your feeds. If you are going to read all the stories in a subscription at once, I would recommend the expanded view, which shows the entire articles. If you are just going to pick and choose what you are going to read the list view would be the best, having the ability to just glance at each title.
“Trends.” There is a tab in Google Reader called ‘”Trends.” That’s where you go to see the amount of stories you read in a day, week or month and compare which days you read the most. You can also see which of your feeds are the most active and which are the least active. I try and check my most inactive feeds regularly and see which ones I should unsubscribe to and which ones no new content is coming from.
“Sharing” different posts in Google Reader a great way to keep your friends updated on the stories you are reading. Each Google Reader user has their own public page with all of their shared stories, which anyone can look at and read.
Here is a list of keyboard shortcuts you can use in Google Reader to become a little bit more productive and faster at reading your subscriptions.
- j – item down
- k – item up
- s – star
- t – tag
- r – refresh
- m- mark as read/unread
- shift+s – share
- shift+a – mark all as read
One last thought about Google Reader, is that there is about a 30 minute delay, between when the post was submitted on the site/blog and when it shows up in your Google Reader. So for the guys who love their breaking news and post it right away to social news websites… this may be your one drawback. If you need immediate updates a tool like Rasasa which pushes RSS directly to your IM might be the way to go.
But, overall, Google Reader is one of the simplest (but still feature filled) online RSS Readers out there and is totally recommended for the average user who just wants to efficiently check their news sites and blogs on a daily basis.
Don’t forget to subscribe to the 10e20 RSS Feed!
Bookmark this post:
Some things are easier to do than others when manipulating type. Here is a quick tutorial on how to transform and distort your type in an easily scalable way with a vector mask.
This works on the same premise as distorting or transforming a basic shape. When you convert a text layer to a shape a vector mask is applied to it and ables you to make many transform functions. Very quick, very easy, very effective.
Step 1. Create a new layer with your text on it. Experiment with various widths and styles. For exaggerated distortions I find that a thick or Bold Condensed type form works best.
_______________________________________________________
Step 2. With the type layer selected go to Layer/Type/Convert to Shape.
_______________________________________________________
Step 3. Now you can go to Edit/Transform Path/and choose any of the transform functions available. This will create a working vector mask path that will make the transforms smooth and scalable. For this example Skew was used with a bit of Distort on the left side corner.
_______________________________________________________
Step 4. When you are happy with your transforming go to the Layer Palette and right click on the Vector Mask thumbnail for the text layer. Now select Rasterize Vector Mask.
Thats it! Play with the various transforming functions with this technique, you will get clean crisp lines and it is a much more functional method to use than say just Rasterizing the type right off the bat.
Don’t forget to subscribe to the 10e20 RSS Feed!
More text style tips! Text styles are a great way to get away from the same solid color on a background and add some subtle ‘pizazz’ to the type.
For this tutorial we will need a photograph or an illustration to go behind the text that we will be applying the style to.
Step 1. Place your photo on the first layer and create a new layer for the text. Use a large font and fill it with black.
_______________________________________________________
Step 2. With the text layer selected apply a new Layer Style of Inner Glow to it. Select black as the color for this and set the Blend Mode to Multiply.
_______________________________________________________
Step 3. Click back on the Blending Options for the layer in the top of the layer style selections under the word Styles. The default settings will change if you change these. After you change them it will say Custom. Under Advanced Blending lower the Fill Opacity down to about 10% or less.
You can apply other layer styles to this but that is the core steps to achieve this effect.
There you have it! A very simple text style that you can use.
Don’t forget to subscribe to the 10e20 RSS Feed!
Bookmark this post:
