In this tutorial you will learn how to make a clean photo gallery website layout. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download. This will be your final result 1. The first thing we want to do is create a new document with the dimensions of 1024×1200. 2. Using your Paint Bucket Tool from your tool pallet, fill your background layer with #3E4C54 3. Next lets use our Rectangle Marquee Tool to make a selection similar to the following and fill it with #1F2B33. This will represent our headers background 4. On this layer we want to add some blending options, so go to your layers pallet and Right Click your layer and choose Blending Options from the drop down menu and insert the following 5. Time to move onto a couple links for our header. This is where our page links will be displayed. Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #FC4F83 6. Next make 2 more boxes of equal size with a fill color of #27343C. Then you can add some text with the color#FFFFFF to your buttons similar to the following 7. Keeping with the simple nature of this layout, our logo won't be too flashy. For the logo, I used the font Helvetica Neu, set to bold, with the anti-alias set to strong. I used #FFFFFF for the "Your" and "Gallery", and for "Photo" I used the color #FC4F83. For the tagline I used the color #B1D4E8. When it's all said and done, you should have something that looks like this 8. Now it is time to get the sidebar out of the way. Using your Rounded Rectangle Tool with a radius set to 10px, and a foreground color of #ECF1F3, make a rectangle similar to the following 9. We now want to create our link units for our Category box, and our Highest Rated image box. Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #000000 10. Next, insert the following blending options onto it's layer 11. Now just use your text tool to add the heading "Categories" and you should have something that looks like this by now 12. Using your Rectangle Marquee Tool again make a selection similar to the following and fill it with #000000 13. Insert the following blending options onto its layer 14. Use your Text Tool now to add a link with the color #3E4C54, and you should have something that looks like this 15. Now just repeat steps 12-14 as many times as you'd like and you'll have something that looks like this 16. I repeated those steps for a "Highest Rated" box, and added some 200×80 ads, and you'll have something that looks like this for your sidebar 17. Time to move onto our content area. Using our Rounded Rectangle Tool with a radius set to 10px, and a foreground of #FFFFFF, make a Rectangle similar to the following. Be sure to let it overlap your sidebar a bit 18. On your newly created Rounded Rectangle layer, insert the following blending options 19. We now want to work on how our picture will be displayed in our gallery. Using your Rounded Rectangle Tool with the radius set to 10px, and a foreground color of #ECF1F3, make a rectangle similar to the following. It doesn't have to be exactly the same size as mine, just a rough estimate. 20. Now insert the following blending options onto your rounded rectangle layer 21. We now want to duplicate our rounded rectangle layer, and make a selection similar to the following and choose Edit>Clear (or hit delete on your keyboard). To make it easier for you to see what was done, I made the rounded rectangle red for the purpose of this tutorial. This will be a background for the title of our image. 22. Insert the following blending options onto its layer now 23. Your results will look similar to this 24. Next we want to add a little shine. Make a 1px high selection similar to the following and fill it with #FFFFFF. Change its Blend Mode to Soft Light and lower the opacity to around 57% 25. When you zoom out you'll have something that looks like this 26. Using your Text Tool, go ahead and place it in a similar manner to the following 27. Now insert the following blending options onto your newly created text layer 28. Next we want to add some text to show what day it was posted. I used the color #3E4C54 for my text. I also went ahead and added some rating stars to the header using the default custom shapes tool and you'll have something that looks like this 29. The last step is adding some text for tags, and your category, and you'll have a finished result that looks like this for your pictures display box 30. Now we want to add a simple pagination option at the bottom of our content area. I used the color #1F2B33for the numbers. For the active page, I used the same settings we used back in step 5 for our active page. I made a box and fill it with #FC4F83 31. The last thing we need to do is add our footer. Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #27343C. 32. Now insert the following blending options onto its layer 33. The last thing I did was add some footer text, and that is it! You are finished! I went back and added a different background behind the category and tags on your photo gallery, but it is an optional change. Your final product will look similar to the following Remember if you have any questions or comments about this tutorial to leave your responses in the comments below and we will get back to you very quickly. Author:
Matthew Heidenreich
Category:
Photoshop
Thursday, April 30, 2009
How to make Photo Gallery Website Layout
Tuesday, April 28, 2009
Getting AdSense ads relevant to your site content
If you find that the AdSense ads displayed on your web page are not very relevant to your site content, or you are often getting PSA's (Public Service Ads), you will get fewer clicks and therefore lower AdSense revenues. There are certain things you can do about it though.
WRITE GOOD, INTERESTING, INFORMATIVE CONTENT AND FOCUSED CONTENT
"Content is king" many says, and it is true. Write good interesting, informative and focused content that will attract visitors to your site and attract search engines. Don't try to write about everything under the sun. Be focused and you will have ads that are relevant to your content. And when the ads are relevant to the content of the site, visitors to your site are more likely to click on the ads as it may be something that they are searching for.USE AN URL THAT CONTAINS WORDS RELEVANT TO YOUR SITE
I haven't come across any site that mention this, but I believe it to be true. I helped my son set up a blog to display photos of the Mini he wanted to sell, and suggested to him he might as well put some ads there as well. the URL of his site was http://mini-for-sale.blogspot.com/. Within minutes of putting the ads, he happily reported to me that the site was getting relevant ads. The blog had only one post, some description and many photos which have the alt="" attribute, but nothing within the "" (search engines cannot read images, but can read the description that is typed in between the "" marks in the alt="" attribute of the HTML for an image). I attribute that to the keywords (separated by hyphen, search engine cannot distinquish between words in a combined word) in the URL. Because the ads were relevant, the site generated some clicks within days of it being set up.This is especially true for newly created sites as those with sites that have been on the Web for a long time, have been indexed by search engines and have many inbound links, changing URL will result in having to start all over again and also result in many dead links. For them, changing the URL for this purpose may not be a good idea.
URL for established sites are not recommendated to change, but the Headings (or title) of the blog/site and post/pages can easily be changed. Put relevant keywords in the them.
USE SECTION TARGETING
Surround the relevant sections of your text with the tags <!-- google_ad_section_start --> and <!-- google_ad_section_end --> to emphasise a relevant page section. You can also designate sections you'd like to have ignored by adding a (weight=ignore) to the starting tag, like this:<!-- google_ad_section_start(weight=ignore) -->
That means:
<!-- google_ad_section_start(weight=ignore) --> text to be ignored here<!-- google_ad_section_end -->
USE THE ALT="" ATTRIBUTE IN HTML FOR IMAGES
As mentioned above, search engine can only read text. The HTML for an image may takes this form: <img alt="text"> where you have to put some descriptive words to replace the "text". If you use the photo upload icon
, the HTML for the image will instead be of the formatYou will see that the alt="" (in red) have already been included for you to fill in. Just type in a description of the image. For example, in the above HTML for the photo upload icon image, I put it as alt="Blogger photo upload icon". If your site has many photos, but little content, it is especially important that you include these alt="" attributes.
DO NOT HAVE TOO LITTLE CONTENT ON A PAGE.
If your page contains a lot of graphics and very little text, AdSense will have a hard time figuring what the page is all about. It may then display irrelevant or Public Service ads for which now payment will be made. Use text instead of graphics to display websites names, page titles and headlines. When you have to use graphics, make sure to include the attributes alt="" and title="" so that search engines can figure out what the graphics are all about. Type text relevant to the graphic between the " marks.Try to include more text on the page. Do not use sneaky methods to include text like making the text color same as the background as this will be considered spam by search engines and your site may get penalised.
DO NOT HAVE TOO MUCH UNCONNECTED CONTENT ON A PAGE
If you have too much unconnected content on a page, it is likely that it may also contains many unrelated keywords and AdSense may become confused and display public service or irrelevant ads. When you have a lot to write about, try to divide it into many pages, each concentrating on a few related keywords. Link the pages using keywords in the link text (anchor text).RESEARCH KEYWORDS
Use the free keywords suggestion tool at "Overture Keyword Selector Tool" to get suitable keywords and key phrases.Update 2 May 2008: A reader alerted me to the fact that the link to Overture is dead. An alternative is Google AdWord Keyword Tool. Please alert me of any dead links as search engines do not like dead links any your blog search engine ranking can be affected by dead links.
Or better still, download and use the free program Good Keywords from Softnik Technologies. Another alternative isWebCEO. WebCEO have tools for you to research keywords/phrases, etc., and also have tutorials for you to learn about SEO (Search Engine Optimization). They have free versions without the frills.
Place keywords at the beginning of your content and repeat them. Repeating keywords make it easier for AdSense to figure out what your page is all about. Do not do this in excess as doing so may make your text sound awkward to a reader and may also be considered spam by search engines, attracting penalty. Instead of repeating the same keyword too many times on a page, try to use synonyms and related keywords. For example, instead of repeating "idol" 20 times, occasionally use "paragon" or "ideal" instead. Where possible use <strong>, <em>, <b> and <i> to give weight to the keywords.
USE KEYWORDS WITH COMMERCIAL VALUE
If your subject matter contains only keywords on which no one bids on, you may get only public service ads instead of paid ads. Try to incorporate keywords with commercial value into your content. For example, your subject matter may be on some obscure medical condition. Try sprinkling a few drug names into the content to make it display paid ads rather than public service ads.AVOID ACRONYMS IF POSSIBLE
Someone once posted an article on per-per-click advertising on a website and was surprised to find that all the ads shown on the site relates to Apple computer products and nothing on per-per-click. It turned out that he was using PPC as an acronym for pay-per-click and PPC is also an acronym for "PowerPC" which is Apple's line of Power Macintosh computers. When he replaced all the PPCs with pay-per-click, the problem went away.PUT ADS ON THE POST PAGE
If your site is a blog, this is a tip from Biz Stone, former Senior Specialist on the Google Blogger team from his book Who Let the Blogs Out? : A Hyper-connected Peek at the World of Weblogs
: "don't put them on your blog — put them on your post pages. See, the ads are content sensitive; that means they are relevant to the text of the page they cohabitate…if you set the ads up to display on your blog's post pages — the individual archive page of each post — then they will learn the content on that page and serve up highly relevant advertising." However, some may consider putting ads within the content a bit too obtrusive and put off visitors, and if you are of that opinion, use 3 column templates and put the ads in the sidebar and above the fold.Monday, April 27, 2009
20 Tips for More Efficient Google Searches
For millions of people Google is an indispensable search tool that they use every day, in all facets of their lives. From work or school, research, to looking up movies and celebrities to news and gossip, Google is the go-to search engine.
But instead of just typing in a phrase and wading through page after page of results, there are a number of ways to make your searches more efficient.
Some of these are obvious ones, that you probably know about. But others are lesser-known, and others are known but not often used. Use this guide to learn more about, or be reminded of, some of the best ways to get exactly what you're looking for, and quickly.
For more on Google's search syntax, see this guide, and this one.
educational information: ["dumb little man" research *.edu].
the body text, and the anchor text (the text used to describe a link).
My Top 4 iGoogle Gadgets
I like using iGoogle because it makes me feel like I am already multitasking just by looking at my home page. The usual gadgets most people already have on iGoogle are probably GMail, to-do lists, and some favorite blogs. Here are the three gadgets that I love: This is a new one I didn't know about until yesterday. By going into "add a gadget", and in the search box type your favorite podcast. For example, I added the Nature podcast to my iGoogle. By clicking on "Add it now" the podcast episodes are added to your regular iGoogle homepage. By clicking on an episode, you can listen to it from within your browser and choose whether to save the file to your hard drive or not. I like this gadget because I listen to a lot of podcasts, and with a limited hard drive space it's nice to not to save each and every episode when you don't really want to listen to them twice. While I'm scanning the latest RSS feeds I get in iGoogle, I like being able to keep in touch with my GTalk contacts on the same page. Search for "Google Talk", and add the gadget to iGoogle. The result will look like the picture at the top of this article, and you can start any chat right from your homepage. One of my all-time favorite ways of keeping track of my friend's picture albums, especially those who don't use Facebook, is to add their Picasa RSS feed to my iGoogle homepage. I wrote about how you can do this a little while ago on Google Tutor. When I am working I have countless tabs open (I can't imagine how I did it before browser tabs were invented!), and Facebook tends to be one of them. I just added it to my iGoogle though, so I don't need to pollute my browser with more tabs than I can handle without spending too much time navigating between them. To do the same, simply search for "Facebook" after clicking "Add a gadget" on iGoogle. There are so many gadgets you can add to iGoogle, what rocks your home page? I'd love to hear about new interesting gadgets, and the ones that are truly making a difference in your day to day life, whether they are plain fun, or just make your life easier!
1. Listening to Podcasts in iGoogle
2. GTalk in iGoogle
3. Picasa!
4. Facebook
14 Add-ons that make Gmail more awesome
Gmail has been my email client of choice ever since I managed to get my hands on an invite years ago (ah, the days of Gmail-by-invitation-only, I'm just glad I never paid for mine). I never really did much do pimp my inbox though, until now. Well, until Multiple Inboxes made it possible to prioritize my messages and turn even my inbox into a to-do list.
Turns out, I can do a lot more than just this, as long as I download the right script.
I decided to compile a list of the Firefox extentions and scripts that seriously pimp your inbox and improve on Gmail's basic powers.
Productivity & Organization Add-ons
- Gspace: If uploading to Google Docs isn't enough, you can use Gmail as a virtual online drive.
- GTDInbox: I was unable to find a version of delegate to Remember The Milk that actually works with the latest version of FireFox, but I did find GTDInbox. I suppose if you already have a RTM account, then this doesn't help. But GTDInbox does come with some other functions. You can use it to make task lists, manage projects, team working, and even customer support. I still like the native Gmail taskmanager, especially because it makes a link to a related email when you click "create task" in a particular message.
- Gmail Todo: Another script to turn Gmail into a To Do list.
- Dragdropupload: This little script lets you drag files to the attachment box, instead of manually adding each of them separately.
- Folders4Gmail: If you don't really like sorting your messages with labels, you can use this add-on to go old-school and create folders in Gmail.
- GMail Attachment Icons gives you a little icon in your inbox showing what type of file is attached in each message. Endlessly helpful when you are looking for that one PDF file among all document attachments.
- Gmail Lite: This reminds me of productivity geared text processing programs that remove all the extra stuff, leaving you with minimal distractions. Gmail Lite takes away ads, footer, stars, and chats. If you need minimal visual stimulation to be productive, this one is for you!
-
EasyJobApplications: If you use Craigslist a lot to apply for gigs or jobs, this script seriously cuts down on the time-per-application you need. Apply to Craigslist positions with a click of a button. - Gmail notifier: This speaks for itself, this add-on notifies you of incoming messages. The cool part is that it supports multiple accounts.
- Gmail Manager: One of my new favorites. Anyone managing multiple accounts needs this script.
- Clean Gmail Print: If you need to save color ink on your printer and print a lot of email messages, this script removes the Gmail logo when you print something out. Over time, it can save some money, or comes in handy if working in a logo-unfriendly environment.
- gDate2Cal 0.1: This makes dates in Gmail into links that take you to the same day in Google Calendar. I'm not sure yet how useful this is… but I'll find out.
- GmailTo: Opens mailto: commands from websites to compose in Gmail. I love this one, no more waiting until an email client I never use opens when I accidentally hit one of these links.
- Gmail Multiple Signatures, plus Float: If you wear multiple hats, you have multiple signatures. This one changes your signature based on the return address you enter. Love it!
Which one of these are you using? I went from a plain-Jane inbox to a seriously souped-up experience within just a few days, and I am loving the increased functionality I got from my Gmail.
EasyJobApplications: If you use Craigslist a lot to apply for gigs or jobs, this script seriously cuts down on the time-per-application you need. Apply to Craigslist positions with a click of a button.