Since the early days of the Internet, if you wanted more than just a flat color, you had to use images for your web designs. Gradients, drop shadows, and other elements had to be added in Photoshop—but things have since changed. Over the past couple of years, CSS has advanced to the point that you can add these things using coding that is interpreted in the browser. Although CSS3 doesn't have full support from every browser just yet, it is a huge step ahead for the design community. And here are just a few of the reasons why.
Better usability. Using coding instead of images means that your pages will load faster. It cuts down on the amount of HTTP requests, which means less bandwidth is taken up and the network runs more smoothly. Furthermore, using images isn't always good for universal usability; it could make it difficult for people using devices other than a desktop or laptop computer to access and navigate the pages. This is especially true for smart phones. The small screen size causes the images to load slowly and become distorted. By using hard coding, then the website's overall layout and design will look better in all browsers.
Smaller file sizes. One of the reasons why web pages using CSS3 load faster is because the file sizes are smaller. In addition to loading faster, having smaller file sizes saves room on the server and the computer, both when the page is created and when it is loaded in the browser window. Using CSS3 means that less resources are used.
Faster development time. Another area that CSS3 excels at is saving time when it comes to the development stages of building a website. Coding takes less time than creating the effects in Photoshop and going back and forth between your computer and the FTP client. Furthermore, when you need to make changes and see what they look like live, you can simply tweak the coding in the CSS file and save it, then refresh the page, whereas using image files, you'd have to save the images and upload them all to the FTP before you could refresh the page. Although the time may seem negligible for each image, managing more than a couple of images will cause the time to build up.
Although it may be some time before CSS3 is instated as protocol, it is already being utilized and steps are being taken towards making it standard. There are too many benefits to let it fall by the wayside. So even though there are still browsers that don't fully support CSS3, it is beneficial to use it along with a fallback, to make your sites ready for the future.
About CODANK Web Design
CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.
For more information, visit us at www.codank.com
Friday, December 30, 2011
Wednesday, December 28, 2011
Why you should create a mobile website
These days, more and more people are accessing the Internet on the go, leading to the rise of mobile Internet. It is predicted that within a few years, the number of people who use their mobile devices to access the Internet will outnumber those who use desktop PCs and laptops. Although there are a few years between now and then, you should still make sure you have a stripped down mobile version of your website ready since there is such a large chunk of mobile users. If that isn't enough to convince you to optimize for mobile use, here are a few more reasons why.
Non-mobile layouts look cramped. There is nothing worse than trying to use a site on your mobile device where the layout is crammed together and items are overlapping. The small screen size forces elements on top of each other, making it difficult to use. Websites that rely on images or tables are especially bad; elements can mysteriously disappear or render in strange ways.
The navigation doesn't always work. There have been instances where I've tried to use my phone to access a website, but have been unable to because of faulty navigation. Using the arrow keys doesn't always get me where I want to go, and sometimes links are inaccessible due to the way the site is coded and laid out. There are also problems if the navigation uses dropdowns (which don't work in all mobile devices) or if your device uses a touch screen and you're unable to click on the correct link. If users can't navigate a site, they'll go somewhere else for their information.
Mobile Internet is often slow. There are some users who already have 4G and don't have as much of a problem, but there are still users who have 3G network speed and below. My phone doesn't even get 3G speeds, so it can take a good while for non-optimized pages to load. This is especially true if you have a lot of media, JavaScript, or images on your pages. People tend to be impatient when they're on a mobile device - more so than when they're browsing the Internet on a desktop computer. So if you want to keep your mobile visitors, make sure you have a mobile version of the site and test it to make sure it loads within a couple of seconds.
Creating a mobile version of your site is not hard to do - and you don't have to do it alone. You can contact a design company, such as Codank Web Design, to help you create an optimized mobile version of your website so you won't fall behind the times.
About CODANK Web Design
CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.
For more information, visit us at www.codank.com
Non-mobile layouts look cramped. There is nothing worse than trying to use a site on your mobile device where the layout is crammed together and items are overlapping. The small screen size forces elements on top of each other, making it difficult to use. Websites that rely on images or tables are especially bad; elements can mysteriously disappear or render in strange ways.
The navigation doesn't always work. There have been instances where I've tried to use my phone to access a website, but have been unable to because of faulty navigation. Using the arrow keys doesn't always get me where I want to go, and sometimes links are inaccessible due to the way the site is coded and laid out. There are also problems if the navigation uses dropdowns (which don't work in all mobile devices) or if your device uses a touch screen and you're unable to click on the correct link. If users can't navigate a site, they'll go somewhere else for their information.
Mobile Internet is often slow. There are some users who already have 4G and don't have as much of a problem, but there are still users who have 3G network speed and below. My phone doesn't even get 3G speeds, so it can take a good while for non-optimized pages to load. This is especially true if you have a lot of media, JavaScript, or images on your pages. People tend to be impatient when they're on a mobile device - more so than when they're browsing the Internet on a desktop computer. So if you want to keep your mobile visitors, make sure you have a mobile version of the site and test it to make sure it loads within a couple of seconds.
Creating a mobile version of your site is not hard to do - and you don't have to do it alone. You can contact a design company, such as Codank Web Design, to help you create an optimized mobile version of your website so you won't fall behind the times.
About CODANK Web Design
CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.
For more information, visit us at www.codank.com
Friday, December 23, 2011
How to design a coming soon page in Photoshop CS4
Even if you don't know how to code using HTML and CSS, you don't have to be left out of the design process. By taking a few stock photos, icons, and using the tools available to you (such as Photoshop), you can come up with a design concept in a relatively short period of time. Coming soon pages can be especially tricky to come up with, which means the planning and designing stages are all the more crucial. You want to make an engaging page that gives visitors a couple of options of what to do next, and you want to give more intrigue and information than a simple, white “Under Construction” page. In this tutorial, we're going to look at how to create a design concept for a coming soon page using Adobe Photoshop CS4.
Before we get started, here are a few basic pointers for coming soon pages that you should keep in mind:
You don't have to have all of these options stuffed in your page, but at the very least, you should have the site's logo and name, a few lines of information, and a form for your newsletter or site launch notification. Sometimes keeping it simpler is better.
To start your project, open Photoshop and create a new document by clicking File then New. You want to make your document size as close to a screen size as possible, while leaving a bit of room. In this case, I've made mine 1100 px by 900 px and left the background transparent.
You can fill the background layer with color, or you can create a new layer (like I did) just in case. To create a new layer, go up to the top bar of the workspace and click Layer then New then Layer. When the new layer dialogue box pops up, you can type in the name you want to give it (and I've named mine Site Background Color).
Now click on the color swatch on the Tools panel on the left hand side of the workspace. For this project, I've chosen to make my coming soon page for a fictitious campground site, so it has a 'woodsy' theme. To go along with my theme, I've chosen a forest green (hexadecimal value 355739) for the background. You can use the color picker to choose this color or any other color you want.
To fill the background, click on the paint bucket tool on the Tools panel on the left hand side of the workspace. If you don't see it, click on the little black arrow at the corner of the gradient tool.
It looks nice, albeit flat. So I want to add some interest to it by adding a pattern overlay. To do this, navigate to the bottom of the Layers panel on the right hand side of the workspace and click on the fx. Then choose Blending Options to bring up the dialogue box.
Click on Pattern Overlay and choose Overlay from the Blend Mode drop down. This will ensure that you retain the color you've chosen in the previous steps. Once you've done that, click on the black arrow next to the pattern preview and look through the options. I've chosen to use the Slate pattern; you may not see any you want in the ones available, so if you want to browse more options, click on the little black arrow next to the list of patterns.
At this point, we can move on from the background to the top banner (if you want to have one; you don't technically have to have one on a coming soon page). You can use a picture you already have or find a stock picture. I've chosen to use a picture I edited in another tutorial. In order to use it for the banner, I need to resize it. To do this, go to the top bar and click on Image then Image Size. Once the dialogue box pops up, make sure that the Constrain Proportions and Scale Sizes checkboxes are marked, then change the value of the width to 1100 px.
The width is the right size, but the height is too big, so we need to do some cropping. Choose the crop tool from the Tools panel and drag it around the area you want to keep. Once you're satisfied, press Enter. You may need to do this a few times to get the size you want; just keep checking the image size by clicking on Image and then Image Size to see if you get the size you want. It's best to have the image around 150 to 200 px high.
Once you finish cropping it, you can select the picture by pressing Ctrl + A, then copy it by pressing Ctrl + C. Switch back over to the website design tab and paste the image; a new layer will be automatically created for it. I thought the contrast between the picture and the background was a little much, so I went to find a little something to add to the banner to soften it. I opened another file I'd used in a tutorial and used the rectangular marquee tool (found in the Tools panel) to select a thin strip of the water to use in my website design. If you do something like this, make sure that you Feather your selection (by entering a value in the Feather text area near the top bar; I made mine 10 px). This gives it a nice, soft edge and a gradual fading out along the edges to help it blend in more.
You can use the Move tool on the Tools panel to drag or nudge the images and arrange them where you want them. Here's what my design looks like so far:
Now that our banner is done, we want to start working on the content for the rest of the page. You can make your own logo, use your company's logo, or find an icon to use as a logo on a site such as iconfinder.com. Generally speaking, the logo and the site's name would go on the banner, but for a coming soon page, it's put in the middle of the screen. So once you've found the icon you're going to use, you can paste it and move it beneath the banner. I've used an icon I found on iconfinder; it's just a little small. If you want to resize your logo, you can do so by clicking Edit then Transform then Scale.
Use the bounding box handles to change the size of the icon; be sure to hold down the Shift key while doing so to ensure that the proportions remain. When you're finished resizing it, click the green arrow at the top of the workspace.
The icon I used was black, and it doesn't blend in with the colors or the theme that well. My text is going to be light, so I want to make my icon match. To do this, I went down to the bottom of the Layers panel and clicked the fx, then clicked Blending Options. I chose to use a Color Overlay and click on the color swatch to change it to white.
It's time to add some text, so click on the text tool in the Tools panel. Once you select it, you get a number of options along the top bar, including font family, font weight, font size, alignment, color, etc. I chose to use a heavy serif since the name of the site is important and I want it to draw the most attention; the font I used was Casablanca Heavy SF with a crisp anti-alias method. I also clicked on the color swatch and chose a color from the thin water banner, then moved the color picker up so it was just a slightest tint of yellow.
We need to choose the color of the text areas for our form. I want mine to blend in with the colors to give it a more sophisticated feel, so I've used the color picker and the eyedropper tool to select the background color. Then I dragged the color picker down so it was a darker shade of that color (I used hexadecimal 223b29).
Once you've done that, find the shape tool on the Tools panel and click the black arrow at the corner for more shape options. I've chosen to use a rounded rectangle shape.
Drag a box out as wide and high as you want it to be. Once you've done that, you can use the path selection tool (that looks like an arrow) from the Tools panel to select the box, then press Ctrl + C to copy it and Ctrl + V to paste it. Drag the second box out to the side. Copying the first box will ensure that both boxes are identical.
Use the move tool to move the boxes down, then select the text tool and choose a sans-serif font such as Arial for the second heading and the body text. I chose to use Arial in white. Make the second heading smaller than the logo text and the body text smaller than the second heading. Once you've typed 'Coming Soon' and a brief introduction to the site, then you can adjust the size of your form boxes to make sure they fit. You can do this by clicking on Edit then Transform then Scale.
Now we need to put some text inside the form boxes to prompt users. To do this, click on the Text tool and choose a font from the drop-down. I decided to use a serif font (going with the classic Times New Roman) and italicize it. I also changed the anti-alias type to Strong. Then, to make it blend in more with the text boxes, I went to the top of the Layers panel and clicked on the arrow next to the opacity drop down so I could turn the opacity down to 70%.
Next, we need a submit button. Generally, it's a good idea to have the word Submit somewhere near the button. We're running out of room, though, and users know what an arrow means, so we're just going to create an arrow button. To do this, go back to the Tools panel and click on the shape tool and choose the rounded rectangle tool. Drag a small rounded rectangle next to the E-mail address text box. You can use the move tool to drag or nudge elements as needed to fit in the space; remember, you want your margins to look nice and you want to line your elements up as much as you can on either side.
As soon as you've done this, it's time to pick an arrow shape from the shapes library. Again navigate to the shape tool and click on the little black arrow for more shape options. Choose the Custom Shape Tool and then go to the top bar. Click on the little arrow next to the shape that displays for more options; you can always click the secondary black arrow next to the list for even more options. Once you find an arrow you like, select it. I've chosen to use an arrow that sort of looks like a compass arrow since the site's theme is camping.
Drag the arrow out to fit in the button. If the shape disappears, make sure your shape layer doesn't have a color overlay over it. If it does, just drag the style down to the trash can icon at the bottom of the Layers panel.
Next, we want to create the footer. To do this, go to the shape tool and click on the rounded rectangle shape. Drag the shape tool to make a thin rectangle at the bottom of the page. Once you do that, you can navigate to the top of the Layers panel to turn the opacity down to make it blend in more with the design (in this case, I've turned mine down to 50%).
Use the text tool to add some small copyright text to the bottom left of your footer. You can also include icons of the social networks your company is on, such as Twitter, Facebook, and Blogger. You can use iconfinder.com to find small icons (I've used ones that are 32 x 32 px) and copy and paste them into your document, using the move tool to arrange them at the bottom.
And that's about it! If you want to, you can merge some of your layers, but you want to preserve most of them so that the web designer or developer you're working with can take the images you've created and use them when building the code for the website. Make sure you save the document as a PSD file to retain the layers.
About CODANK Web Design
CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.
For more information, visit us at www.codank.com
Before we get started, here are a few basic pointers for coming soon pages that you should keep in mind:
- Use a theme that has the colors of your website or is close to the subject matter of your website
- Have the site's logo and name
- Use the term “Coming Soon” somewhere on the page
- Have a few lines of information about what the site is going to be about
- Have a form for signing up to be notified when the site officially launches (with text boxes for name and email address)
- Have links to social media (Twitter, FB, your blog, etc)
- Have copyright and year in the footer
You don't have to have all of these options stuffed in your page, but at the very least, you should have the site's logo and name, a few lines of information, and a form for your newsletter or site launch notification. Sometimes keeping it simpler is better.
To start your project, open Photoshop and create a new document by clicking File then New. You want to make your document size as close to a screen size as possible, while leaving a bit of room. In this case, I've made mine 1100 px by 900 px and left the background transparent.
You can fill the background layer with color, or you can create a new layer (like I did) just in case. To create a new layer, go up to the top bar of the workspace and click Layer then New then Layer. When the new layer dialogue box pops up, you can type in the name you want to give it (and I've named mine Site Background Color).
Now click on the color swatch on the Tools panel on the left hand side of the workspace. For this project, I've chosen to make my coming soon page for a fictitious campground site, so it has a 'woodsy' theme. To go along with my theme, I've chosen a forest green (hexadecimal value 355739) for the background. You can use the color picker to choose this color or any other color you want.
To fill the background, click on the paint bucket tool on the Tools panel on the left hand side of the workspace. If you don't see it, click on the little black arrow at the corner of the gradient tool.
It looks nice, albeit flat. So I want to add some interest to it by adding a pattern overlay. To do this, navigate to the bottom of the Layers panel on the right hand side of the workspace and click on the fx. Then choose Blending Options to bring up the dialogue box.
Click on Pattern Overlay and choose Overlay from the Blend Mode drop down. This will ensure that you retain the color you've chosen in the previous steps. Once you've done that, click on the black arrow next to the pattern preview and look through the options. I've chosen to use the Slate pattern; you may not see any you want in the ones available, so if you want to browse more options, click on the little black arrow next to the list of patterns.
At this point, we can move on from the background to the top banner (if you want to have one; you don't technically have to have one on a coming soon page). You can use a picture you already have or find a stock picture. I've chosen to use a picture I edited in another tutorial. In order to use it for the banner, I need to resize it. To do this, go to the top bar and click on Image then Image Size. Once the dialogue box pops up, make sure that the Constrain Proportions and Scale Sizes checkboxes are marked, then change the value of the width to 1100 px.
The width is the right size, but the height is too big, so we need to do some cropping. Choose the crop tool from the Tools panel and drag it around the area you want to keep. Once you're satisfied, press Enter. You may need to do this a few times to get the size you want; just keep checking the image size by clicking on Image and then Image Size to see if you get the size you want. It's best to have the image around 150 to 200 px high.
Once you finish cropping it, you can select the picture by pressing Ctrl + A, then copy it by pressing Ctrl + C. Switch back over to the website design tab and paste the image; a new layer will be automatically created for it. I thought the contrast between the picture and the background was a little much, so I went to find a little something to add to the banner to soften it. I opened another file I'd used in a tutorial and used the rectangular marquee tool (found in the Tools panel) to select a thin strip of the water to use in my website design. If you do something like this, make sure that you Feather your selection (by entering a value in the Feather text area near the top bar; I made mine 10 px). This gives it a nice, soft edge and a gradual fading out along the edges to help it blend in more.
You can use the Move tool on the Tools panel to drag or nudge the images and arrange them where you want them. Here's what my design looks like so far:
Now that our banner is done, we want to start working on the content for the rest of the page. You can make your own logo, use your company's logo, or find an icon to use as a logo on a site such as iconfinder.com. Generally speaking, the logo and the site's name would go on the banner, but for a coming soon page, it's put in the middle of the screen. So once you've found the icon you're going to use, you can paste it and move it beneath the banner. I've used an icon I found on iconfinder; it's just a little small. If you want to resize your logo, you can do so by clicking Edit then Transform then Scale.
Use the bounding box handles to change the size of the icon; be sure to hold down the Shift key while doing so to ensure that the proportions remain. When you're finished resizing it, click the green arrow at the top of the workspace.
The icon I used was black, and it doesn't blend in with the colors or the theme that well. My text is going to be light, so I want to make my icon match. To do this, I went down to the bottom of the Layers panel and clicked the fx, then clicked Blending Options. I chose to use a Color Overlay and click on the color swatch to change it to white.
It's time to add some text, so click on the text tool in the Tools panel. Once you select it, you get a number of options along the top bar, including font family, font weight, font size, alignment, color, etc. I chose to use a heavy serif since the name of the site is important and I want it to draw the most attention; the font I used was Casablanca Heavy SF with a crisp anti-alias method. I also clicked on the color swatch and chose a color from the thin water banner, then moved the color picker up so it was just a slightest tint of yellow.
We need to choose the color of the text areas for our form. I want mine to blend in with the colors to give it a more sophisticated feel, so I've used the color picker and the eyedropper tool to select the background color. Then I dragged the color picker down so it was a darker shade of that color (I used hexadecimal 223b29).
Once you've done that, find the shape tool on the Tools panel and click the black arrow at the corner for more shape options. I've chosen to use a rounded rectangle shape.
Drag a box out as wide and high as you want it to be. Once you've done that, you can use the path selection tool (that looks like an arrow) from the Tools panel to select the box, then press Ctrl + C to copy it and Ctrl + V to paste it. Drag the second box out to the side. Copying the first box will ensure that both boxes are identical.
Use the move tool to move the boxes down, then select the text tool and choose a sans-serif font such as Arial for the second heading and the body text. I chose to use Arial in white. Make the second heading smaller than the logo text and the body text smaller than the second heading. Once you've typed 'Coming Soon' and a brief introduction to the site, then you can adjust the size of your form boxes to make sure they fit. You can do this by clicking on Edit then Transform then Scale.
Now we need to put some text inside the form boxes to prompt users. To do this, click on the Text tool and choose a font from the drop-down. I decided to use a serif font (going with the classic Times New Roman) and italicize it. I also changed the anti-alias type to Strong. Then, to make it blend in more with the text boxes, I went to the top of the Layers panel and clicked on the arrow next to the opacity drop down so I could turn the opacity down to 70%.
Next, we need a submit button. Generally, it's a good idea to have the word Submit somewhere near the button. We're running out of room, though, and users know what an arrow means, so we're just going to create an arrow button. To do this, go back to the Tools panel and click on the shape tool and choose the rounded rectangle tool. Drag a small rounded rectangle next to the E-mail address text box. You can use the move tool to drag or nudge elements as needed to fit in the space; remember, you want your margins to look nice and you want to line your elements up as much as you can on either side.
As soon as you've done this, it's time to pick an arrow shape from the shapes library. Again navigate to the shape tool and click on the little black arrow for more shape options. Choose the Custom Shape Tool and then go to the top bar. Click on the little arrow next to the shape that displays for more options; you can always click the secondary black arrow next to the list for even more options. Once you find an arrow you like, select it. I've chosen to use an arrow that sort of looks like a compass arrow since the site's theme is camping.
Drag the arrow out to fit in the button. If the shape disappears, make sure your shape layer doesn't have a color overlay over it. If it does, just drag the style down to the trash can icon at the bottom of the Layers panel.
Next, we want to create the footer. To do this, go to the shape tool and click on the rounded rectangle shape. Drag the shape tool to make a thin rectangle at the bottom of the page. Once you do that, you can navigate to the top of the Layers panel to turn the opacity down to make it blend in more with the design (in this case, I've turned mine down to 50%).
Use the text tool to add some small copyright text to the bottom left of your footer. You can also include icons of the social networks your company is on, such as Twitter, Facebook, and Blogger. You can use iconfinder.com to find small icons (I've used ones that are 32 x 32 px) and copy and paste them into your document, using the move tool to arrange them at the bottom.
And that's about it! If you want to, you can merge some of your layers, but you want to preserve most of them so that the web designer or developer you're working with can take the images you've created and use them when building the code for the website. Make sure you save the document as a PSD file to retain the layers.
About CODANK Web Design
CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.
For more information, visit us at www.codank.com
Wednesday, December 21, 2011
Creating a black and white photograph with an accent color in Photoshop
Although Photoshop can be used for many different projects, its original function of editing and retouching photos is what it is best used for. One of the photo adjustments that has become popular is to turn a photograph black and white and have an accent color pop. It might seem like the only way to do this is to select the object and cut it out of the picture, changing the rest black and white, but there is an even easier - and less destructive - way to do this. In this tutorial, we're going to look at how to create a black and white photo adjustment with an accent color in Photoshop CS4.
First open the file you've chosen to work with in Photoshop. I've chosen to use a stock photo of red tulips from MorgueFile. Next, save it under a different name by clicking File then Save As, so that the original file is unaffected. You want to always get in the habit of saving edited files under a different name so if you want to start over again, you can. This is especially important if the pictures are your own and you have only one copy.
Now right click on the background layer on the right hand side of the workspace in the Layers panel. From the list of options, choose Layer from Background. This unlocks the layer and allows you to make more changes to it, if needed.
We want to make the picture black and white, so to do that non-destructively, we need to add a new adjustment layer. That way, if you don't like the changes, you can easily revert to what you had before by deleting the layer. To create an adjustment layer, go to the top bar and click on Layer, then New Adjustment Layer, then Black and White.
Making sure the Black and White layer is selected, navigate to the Tools panel on the left hand side of the screen and choose the brush tool. Click on the color swatch at the bottom of the Tools panel to bring up the color picker, then choose black. Using a black brush with the adjustment layer and layer mask will "erase" the areas you brush over; however, you can get those areas back by brushing over them with a white brush. Use a bigger brush (like 66px) to get the larger areas; use a smaller brush to get edges and hard-to-reach places.
Brush over every part of the picture that you want to be colorized; once you are finished use the zoom tool to check for places you missed or places that need to be touched up with white to make it as neat as possible.
Touching up photos is easy using adjustment layers and layer masks. Once you have spent some time working with them, you'll soon find you can make almost any photo look professional by using Photoshop and working with adjustment layers.
About CODANK Web Design
CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.
For more information, visit us at www.codank.com
First open the file you've chosen to work with in Photoshop. I've chosen to use a stock photo of red tulips from MorgueFile. Next, save it under a different name by clicking File then Save As, so that the original file is unaffected. You want to always get in the habit of saving edited files under a different name so if you want to start over again, you can. This is especially important if the pictures are your own and you have only one copy.
Now right click on the background layer on the right hand side of the workspace in the Layers panel. From the list of options, choose Layer from Background. This unlocks the layer and allows you to make more changes to it, if needed.
We want to make the picture black and white, so to do that non-destructively, we need to add a new adjustment layer. That way, if you don't like the changes, you can easily revert to what you had before by deleting the layer. To create an adjustment layer, go to the top bar and click on Layer, then New Adjustment Layer, then Black and White.
Making sure the Black and White layer is selected, navigate to the Tools panel on the left hand side of the screen and choose the brush tool. Click on the color swatch at the bottom of the Tools panel to bring up the color picker, then choose black. Using a black brush with the adjustment layer and layer mask will "erase" the areas you brush over; however, you can get those areas back by brushing over them with a white brush. Use a bigger brush (like 66px) to get the larger areas; use a smaller brush to get edges and hard-to-reach places.
Brush over every part of the picture that you want to be colorized; once you are finished use the zoom tool to check for places you missed or places that need to be touched up with white to make it as neat as possible.
Touching up photos is easy using adjustment layers and layer masks. Once you have spent some time working with them, you'll soon find you can make almost any photo look professional by using Photoshop and working with adjustment layers.
About CODANK Web Design
CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.
For more information, visit us at www.codank.com
Monday, December 19, 2011
Designing logos
For someone who hasn't had much experience working with graphic or web design, discussing logo design with a business can be confusing and even leave you with a few surprises. Even if you won't be the one doing the designs, you should do your part to prepare. Here are a few tips to get you started.
Ask yourself what ideas you have in mind. This can be tricky to do, but you can find inspiration from other websites, companies similar to your own, through symbols that relate to your business, etc. You should also ask yourself whether you have seen any logos you've liked - and what it was about them that drew you in. You can combine elements from several different logos if you need to. Also ask yourself what mood or feeling you're going for with the logo - do you have any words to describe how it should feel? Once you have the answers to these questions, you'll be one step closer to talking with a designer.
Do your research. Many times, customers will receive "sticker shock" when discussing prices with a designer. You should have a good idea about how much logo designs generally cost - but don't expect all quotes to be the same. Depending on the amount of time that goes into the logo and how complicated it is, you may be quoted higher or lower than you were expecting. Regardless, you should have a range in mind and have an idea of how much work will go into it. Design isn't always quick or easy.
Know how you want the logo to be used. Another piece of information that can help you and the designer is to know how the logo will be used and where it will be displayed. Is it just going on the website? Will it also be used on letterheads or on a sign? Your logo is your identity, so be sure you know what you want to do with it so you can better convey your needs to the designer.
With all these things in mind, you will be able to better prepare yourself and realize the concept you want to come up with. Even if you can't figure something out yourself, you'll be able to help a designer, like Codank Web Design, understand what you and your company are looking for.
About CODANK Web Design
CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.
For more information, visit us at www.codank.com
Ask yourself what ideas you have in mind. This can be tricky to do, but you can find inspiration from other websites, companies similar to your own, through symbols that relate to your business, etc. You should also ask yourself whether you have seen any logos you've liked - and what it was about them that drew you in. You can combine elements from several different logos if you need to. Also ask yourself what mood or feeling you're going for with the logo - do you have any words to describe how it should feel? Once you have the answers to these questions, you'll be one step closer to talking with a designer.
Do your research. Many times, customers will receive "sticker shock" when discussing prices with a designer. You should have a good idea about how much logo designs generally cost - but don't expect all quotes to be the same. Depending on the amount of time that goes into the logo and how complicated it is, you may be quoted higher or lower than you were expecting. Regardless, you should have a range in mind and have an idea of how much work will go into it. Design isn't always quick or easy.
Know how you want the logo to be used. Another piece of information that can help you and the designer is to know how the logo will be used and where it will be displayed. Is it just going on the website? Will it also be used on letterheads or on a sign? Your logo is your identity, so be sure you know what you want to do with it so you can better convey your needs to the designer.
With all these things in mind, you will be able to better prepare yourself and realize the concept you want to come up with. Even if you can't figure something out yourself, you'll be able to help a designer, like Codank Web Design, understand what you and your company are looking for.
About CODANK Web Design
CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.
For more information, visit us at www.codank.com
Thursday, December 15, 2011
How to customize and add a Twitter feed box to your website
One thing that I've noticed a lot of websites and blogs offering is a business or personal Twitter feed. If you're new to Twitter - like I was - you might wonder how you could put a Twitter feed box on your website and customize it to your liking. As long as the customization isn't extensive, it's rather easy to do. In this tutorial, we're going to look at where to go to generate the code for a custom Twitter feed box.
The first thing you need to do is go to Twitter and sign in. Once you have, click on the drop down box next to your Twitter user name, along the top bar. When the list of options appears, choose Settings.
We don't need to change any of the settings here; we just needed to see the site map options at the bottom of the page. So scroll down to the bottom of the page where the site map is, then click on About Us.
Once the page loads, choose Resources from the side bar. This brings up a list of resources that you can include in your website, such as a Tweet button or a follow button. Choose Widgets to find the feed box.
After you click on Widgets, click on My Website in the side bar. Choose Profile Widget from the list.
When you land on the Settings tab, you can leave your user name or choose a different account by typing the user name into the box. Then, switch to the Preferences tab and choose how you want your Twitter feed to behave (i.e., whether or not there should be a scrolling bar, whether or not it should start by showing one tweet and updating it every few seconds, how many tweets it should show, etc). Then, click on Appearance and customize the text and box colors. You should try to use colors that you have on your website - or neutral colors mixed with one color from your website. Try to make it so that text is either white or black against a dark or light background; just make sure there is a good amount of contrast so it can easily be read. You can also customize the feed box size by going to the Dimensions tab and inputting the values you want.
Once you're done with that and have tested it to make sure you like it, click on Finish & Grab code to copy and paste the code. Then you can go into the HTML of your website through an HTML editor or CMS and paste it where you want the feed box to be.
And it's that easy! If you want to further customize your Twitter feed box, you can always contact a web or application developer, such as Codank Web Design, to help you with the design you have in mind.
About CODANK Web Design
CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.
For more information, visit us at www.codank.com
The first thing you need to do is go to Twitter and sign in. Once you have, click on the drop down box next to your Twitter user name, along the top bar. When the list of options appears, choose Settings.
We don't need to change any of the settings here; we just needed to see the site map options at the bottom of the page. So scroll down to the bottom of the page where the site map is, then click on About Us.
Once the page loads, choose Resources from the side bar. This brings up a list of resources that you can include in your website, such as a Tweet button or a follow button. Choose Widgets to find the feed box.
After you click on Widgets, click on My Website in the side bar. Choose Profile Widget from the list.
When you land on the Settings tab, you can leave your user name or choose a different account by typing the user name into the box. Then, switch to the Preferences tab and choose how you want your Twitter feed to behave (i.e., whether or not there should be a scrolling bar, whether or not it should start by showing one tweet and updating it every few seconds, how many tweets it should show, etc). Then, click on Appearance and customize the text and box colors. You should try to use colors that you have on your website - or neutral colors mixed with one color from your website. Try to make it so that text is either white or black against a dark or light background; just make sure there is a good amount of contrast so it can easily be read. You can also customize the feed box size by going to the Dimensions tab and inputting the values you want.
Once you're done with that and have tested it to make sure you like it, click on Finish & Grab code to copy and paste the code. Then you can go into the HTML of your website through an HTML editor or CMS and paste it where you want the feed box to be.
And it's that easy! If you want to further customize your Twitter feed box, you can always contact a web or application developer, such as Codank Web Design, to help you with the design you have in mind.
About CODANK Web Design
CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.
For more information, visit us at www.codank.com
Tuesday, December 13, 2011
How to create a kitchen composition in Photoshop CS4
There are some skills that you may want to learn in Photoshop, and though these skills can be taught individually, you can learn so much more by working through a project and experimenting. Because of this, we're going to look at how to create a kitchen composition in Adobe Photoshop CS4 and learn how to work with different transform commands, how to select objects, defringe, and create shadows.
Open the first object (a picture of a mug) and a background texture in Photoshop. You can use the resources provided or find free stock photos and textures by doing a Google search; just try to look for an object that's on a white or black background. Look at the sizes of the documents by pressing Ctrl + Alt + I. You'll have to change the size of the bigger document to match the height or width of the smaller one. In my case, my background is smaller, so I made the height of my object document the same size as the height for the background document.
The first thing we want to do is select the texture background by pressing Ctrl + A. Copy it and then paste it in the object document. Then, double click the object background layer to create a layer from the background; this way we can edit it. Move the texture layer beneath the object layer.
Next, we need to get rid of the background. Since my background is plain white, it's relatively easy to do. Select the magic wand tool in the Tools panel on the left hand side of the workspace. Change the Tolerance (along the top bar) to 32 and select the anti-alias check box so the selection will be nice and smooth without jagged edges. Click anywhere on the white background to select it all; there may be an area (such as inside the handle) that doesn't get selected. To add this area to the current selection, hold down the Shift key while clicking on it. Then, press Delete to get rid of the white selection.
Making sure the object layer is selected, click on Layer then go down to the bottom of the list and choose Matting, then Defringe. This will get rid of any extra white halo around the mug, leaving us with a nice, crisp edge. You can leave the default value of 1 px.
In this case, the mug is too large for what we want to do, so we need to resize it. To do this, press Ctrl + T to transform it. Holding down the Shift key, drag one of the corners in to make it smaller. When you are satisfied with the size, be sure to click the checkmark along the top bar.
Now we want to add a counter to the composition. Open the picture of the counter top. We're not going to use the whole thing, so we need to make a selection. To do this, click on the polygonal lasso tool. If you don't see it, click on the little black button at the corner of the lasso tool and select it from the list.
Select the middle portion of the counter top (or any portion that has the lighting you want) by clicking points to create corners and drawing the lines out. I've drawn around the edges of the middle portion because that's where the lighting is the clearest and you can tell what angles the shadows are at. Copy the selection and paste it into the kitchen composition document.
Press Ctrl + T to transform the counter top and scale it down to size. Once you're satisfied with the size, you need to change the angle a bit to make it fit in better. To do this, click on Edit, then Transform, then Distort. Drag the corners until it comes close to the angles of the mug.
You might find that the mug isn't positioned at the right place on our table/counter top. You can always use the move tool to reposition it. Once you're satisfied with that, it's time to create the shadow for the mug. Create a new layer for some shadowing by clicking Layer, New, then Layer.
Click on the brush tool in the Tools panel and then click on the color picker at the bottom of the panel; choose a very dark gray. Next, click on the drop down next to the brush tip preview and change the size to 100 px and the hardness to 0%. Also be sure to change the opacity to 50% so the texture of the counter top will show through and make it look more like a real shadow.
Brush lightly along the bottom of the cup, tracing the contour. Be sure not to make the shadow line too thick in the front since the shadows on the counter are angled away from the mug. Then select the mug layer and duplicate it by right clicking on it in the Layers panel and clicking Duplicate Layer.
Drag the layer copy beneath the original layer. Then press Ctrl + T to scale it and make it slightly larger than the original copy. Use the move tool to align it at the right side/right corner.
Press Ctrl + T again to rotate the larger mug. Put the pointer at the bottom left corner and move it counterclockwise to rotate it backwards.
We need to make the larger mug into a shadow, so we have to make it one solid color. Click on the fx at the bottom of the Layers panel and choose Blending options.
Click on color overlay and choose a very dark gray color from the color picker. Then click OK.
Now we need to fix the shadow so the angle matches the mug and the light source more closely. To do this, we need to skew it, so click on Edit, Transform, then Skew. When the bounding box appears around the object, pull the corners until it looks something like the second picture below.
Once you have your shadow's angle right, then you need to do some erasing to make it better fit the counter space. Click on the eraser tool in the Tools panel and set the size to 70 px and the hardness to 0%.
Erase the shadow where it goes over the back edge of the counter top. Since the brush hardness has been turned down to 0%, it gives us a nice, soft, feathered edge.
Now we need to make the other edges look softer and more feathered. Click on the brush tool and set the size to 40 px and the hardness to 0%. Then brush along the edges before going over the rest of the shadow. This will keep the entire shadow one opacity when we make it transparent later. Then, once you make sure both shadow layers are next to each other, right click on the top shadow layer and click Merge Down.
Click on the opacity dropdown in the Layers panel for the shadow layer and turn it down to 50%. This will let the counter top show through, making it seem more like a real shadow.
At this point, we're almost done; we just need to do some cleaning up. One of the shadows from the counter top photo is cutting through our mug's shadow. In order to get rid of it, we need to use the clone stamp to select pixels near it and cover it up. Select the zoom tool from the Tools panel, then zoom in to the area where the shadows overlap. Click the eye next to the mug shadow layer to turn it off so we can see what we're doing, then select the clone stamp tool in the tools panel. You can select adjacent areas by holding down Alt while clicking, then brush over the shadow.
Zoom out and turn the mug shadow layer back on. If you see a bit of a line where you've painted over the shadow, select the healing brush tool (it looks like a band-aid). Brush over the area to make it blend better.
At this point, we're done. Now you know how to use a variety of tools and commands in Photoshop. With practice, you'll be able to do more and more with them and create beautiful compositions.
About CODANK Web Design
CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.
For more information, visit us at www.codank.com
Open the first object (a picture of a mug) and a background texture in Photoshop. You can use the resources provided or find free stock photos and textures by doing a Google search; just try to look for an object that's on a white or black background. Look at the sizes of the documents by pressing Ctrl + Alt + I. You'll have to change the size of the bigger document to match the height or width of the smaller one. In my case, my background is smaller, so I made the height of my object document the same size as the height for the background document.
The first thing we want to do is select the texture background by pressing Ctrl + A. Copy it and then paste it in the object document. Then, double click the object background layer to create a layer from the background; this way we can edit it. Move the texture layer beneath the object layer.
Next, we need to get rid of the background. Since my background is plain white, it's relatively easy to do. Select the magic wand tool in the Tools panel on the left hand side of the workspace. Change the Tolerance (along the top bar) to 32 and select the anti-alias check box so the selection will be nice and smooth without jagged edges. Click anywhere on the white background to select it all; there may be an area (such as inside the handle) that doesn't get selected. To add this area to the current selection, hold down the Shift key while clicking on it. Then, press Delete to get rid of the white selection.
Making sure the object layer is selected, click on Layer then go down to the bottom of the list and choose Matting, then Defringe. This will get rid of any extra white halo around the mug, leaving us with a nice, crisp edge. You can leave the default value of 1 px.
In this case, the mug is too large for what we want to do, so we need to resize it. To do this, press Ctrl + T to transform it. Holding down the Shift key, drag one of the corners in to make it smaller. When you are satisfied with the size, be sure to click the checkmark along the top bar.
Now we want to add a counter to the composition. Open the picture of the counter top. We're not going to use the whole thing, so we need to make a selection. To do this, click on the polygonal lasso tool. If you don't see it, click on the little black button at the corner of the lasso tool and select it from the list.
Select the middle portion of the counter top (or any portion that has the lighting you want) by clicking points to create corners and drawing the lines out. I've drawn around the edges of the middle portion because that's where the lighting is the clearest and you can tell what angles the shadows are at. Copy the selection and paste it into the kitchen composition document.
Press Ctrl + T to transform the counter top and scale it down to size. Once you're satisfied with the size, you need to change the angle a bit to make it fit in better. To do this, click on Edit, then Transform, then Distort. Drag the corners until it comes close to the angles of the mug.
You might find that the mug isn't positioned at the right place on our table/counter top. You can always use the move tool to reposition it. Once you're satisfied with that, it's time to create the shadow for the mug. Create a new layer for some shadowing by clicking Layer, New, then Layer.
Click on the brush tool in the Tools panel and then click on the color picker at the bottom of the panel; choose a very dark gray. Next, click on the drop down next to the brush tip preview and change the size to 100 px and the hardness to 0%. Also be sure to change the opacity to 50% so the texture of the counter top will show through and make it look more like a real shadow.
Brush lightly along the bottom of the cup, tracing the contour. Be sure not to make the shadow line too thick in the front since the shadows on the counter are angled away from the mug. Then select the mug layer and duplicate it by right clicking on it in the Layers panel and clicking Duplicate Layer.
Drag the layer copy beneath the original layer. Then press Ctrl + T to scale it and make it slightly larger than the original copy. Use the move tool to align it at the right side/right corner.
Press Ctrl + T again to rotate the larger mug. Put the pointer at the bottom left corner and move it counterclockwise to rotate it backwards.
We need to make the larger mug into a shadow, so we have to make it one solid color. Click on the fx at the bottom of the Layers panel and choose Blending options.
Click on color overlay and choose a very dark gray color from the color picker. Then click OK.
Now we need to fix the shadow so the angle matches the mug and the light source more closely. To do this, we need to skew it, so click on Edit, Transform, then Skew. When the bounding box appears around the object, pull the corners until it looks something like the second picture below.
Once you have your shadow's angle right, then you need to do some erasing to make it better fit the counter space. Click on the eraser tool in the Tools panel and set the size to 70 px and the hardness to 0%.
Erase the shadow where it goes over the back edge of the counter top. Since the brush hardness has been turned down to 0%, it gives us a nice, soft, feathered edge.
Now we need to make the other edges look softer and more feathered. Click on the brush tool and set the size to 40 px and the hardness to 0%. Then brush along the edges before going over the rest of the shadow. This will keep the entire shadow one opacity when we make it transparent later. Then, once you make sure both shadow layers are next to each other, right click on the top shadow layer and click Merge Down.
Click on the opacity dropdown in the Layers panel for the shadow layer and turn it down to 50%. This will let the counter top show through, making it seem more like a real shadow.
At this point, we're almost done; we just need to do some cleaning up. One of the shadows from the counter top photo is cutting through our mug's shadow. In order to get rid of it, we need to use the clone stamp to select pixels near it and cover it up. Select the zoom tool from the Tools panel, then zoom in to the area where the shadows overlap. Click the eye next to the mug shadow layer to turn it off so we can see what we're doing, then select the clone stamp tool in the tools panel. You can select adjacent areas by holding down Alt while clicking, then brush over the shadow.
Zoom out and turn the mug shadow layer back on. If you see a bit of a line where you've painted over the shadow, select the healing brush tool (it looks like a band-aid). Brush over the area to make it blend better.
At this point, we're done. Now you know how to use a variety of tools and commands in Photoshop. With practice, you'll be able to do more and more with them and create beautiful compositions.
About CODANK Web Design
CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.
For more information, visit us at www.codank.com
Subscribe to:
Posts (Atom)
