I just finished a tutorial that led me to creating this Oregon Ducks Wallpaper. It’s sized for a 30″ Cinema Display so if you can’t size it down yourself let me know in the comments. Hope you like it.
Go Ducks!
I got a few emails asking me how I created the leather for the Pac-10 iPhone Wallpaper or if I just used an image from a car interior or something. I created the whole thing in Photoshop and figured that it would probably make a decent tutorial. The secret is bump mapping.
Final output for this tutorial is going to be a desktop wallpaper for a 30″ Apple Cinema display. Document dimensions don’t really matter and you can work at whatever dimensions you please. All the principles outlined in this tutorial will hold true.
Bump mapping is essentially a technique used in all sorts of programs that creates the illusion of depth on a surface. Photoshop can do it along with 3D programs like Maya, 3DS Max, Lightwave, etc. I’m sure everyone has at some point tried blending two layers in Photoshop with each other in hopes of getting a nice looking texture. But, sometimes that texture fails to look convincing and its here that bump mapping can help solve the problem.
The first thing you need to do is find your desired texture. If you don’t know about cgtextures.com go ahead and lightly slap yourself on the back of the head for me. Just kidding. Don’t hit yourself, especially if you are in public. Anyways, cgtextures is an unbelievable resource that you should get yourself accustomed to. I went and chose texture #13224. It’s a nice simple leather to work with.
Now, create a new layer and fill the layer with a very dark, almost black, solid color. I used #181818. As a general practice I don’t like to use 100% white or black in my work because those colors (even though they aren’t technically colors at all) don’t occur in the real world. Unless we are talking about a black hole where everything is devoid of all light we are never going to experience a true black in our day to day lives.
By the way, go ahead and save your file as something appropriate so that your not working from a temp file.
Now the guts of the tutorial. Let’s bump. You will need to place or copy and paste your leather texture into your document. I prefer placing because it will treat your texture as a smart object. That doesn’t matter here, but it’s not a bad practice to get into. To place something just select File > Place… and browse to your desired file.
It is then going to place that file in your document with resizing handles. Resize the leather texture so that it takes up the entire workspace.
We now want to apply a light gaussian blur so that the texture doesn’t have a harsh quality once its bumped. Go to Filter > Blur > Gaussian Blur and enter a setting of 1px.
Next, go to your channels pallet and select the channel (red, gree, or blue) that has the most contrast between black and white. In this case I like the blue channel. With only the blue channel selected, I want to right click on that chanel and select Duplicate Channel…
You will see the new channel called Blue Copy at the bottom. Go ahead and rename that to “Bump.” After you’ve renamed that chanel go and check the RBG eyeball to make all the channels visible again, with the exception of the new “Bump” channel. Finally, go back to your Layers pallet.
You are essentially done with your texture layer now, so go ahead and click the eyeball to make the leather texture invisible. Make sure layer 1, or the layer with your dark color, is selected. Then go to Filter > Render > Lighting Effects…
In my case I have chosen the following setting below. I’ve chosen a very light overhead spotlight to act as my light source. The properties box is pretty standard. You’ll want to note the Texture Channel I’ve chosen. Earlier we named our duplicated channel “Bump.” And that is precisely what we want to use for our texture. Ensure that White is high is selected. And please, understand the art of being subtle. Sure, you can bump up the height to a 100 and have a really <sarcasm>awesome</sarcasm> looking texture. But that isn’t what leather looks like. So please, leave it at a low number and don’t screw up the tutorial. :)
Congratulations! You’ve bumped. You’re result should like something like this. (Click through to see larger version)
The leather needs to breath a little bit, so we need to add some holes. These will be quite small. I’m going to create a repeating fill pattern on a new layer. If you don’t know how to create a fill pattern see my tutorial here.
This is the pattern I’m using. It’s a 30px by 30px square and the holes are 3px in diameter.
Create a new layer in your document above all the others and name it “Holes.” Ensure that your foreground color is #000000 and simply select your paint bucket and fill it with your newly created pattern. (I know I’m breaking my own rule of 100% black, but it’s okay for this situation.) You now have a whole bunch of black holes, but they don’t look real yet.
We’re now going to add a layer style to our Holes layer. Select the Add a layer style… button at the bottom of your layers pallet to get the dialogue box. We are actually going to add a drop shadow, but it is really serving as a highlight instead. With our light source being overhead there is going to be a highlight along the bottom of each dot/hole. Your setting should like like this:
Good. But you’ll notice there is something wrong here. The highlights extend evenly into the darker regions of the workspace. But, in theory, the less light light there is the weaker the highlights will be. So let’s fix that.
Right click the little fx icon on your “Holes” layer and select Create Layer. This will separate the layer effects out from the layer itself. Pretty handy.
Click okay when the warning box pops up. We now have separate layers. Set the blend mode for your original “Holes” layer to Darken. Select the Hole’s Drop Shadow layer and go to Filter > Render > Lighting Effects… I chose the following settings:
Much better. We now have a more realistic lighting setup. Personally, I still like to create an additional layer and then very lightly airbrush the darker regions by hand. The highlights still seem too apparent to me, but I’ll leave that up to your preference.
You could stop at this point or continue to add embellishments such as stitching and a chrome logo like I did for the iPhone wallpapers. Hopefully this has given you good insight on how to take advantage of bump mapping. Here is my final product.
Feel free to use it as a wallpaper if you’re a Duck fan!
Well, everyone else is talking about it so I guess I might as well. Yes, the iPhone 2.1 seems to have fixed nearly every major issue that people we’re having with their phones. I can personally attest to the fixes and the much improved functionality of the phone. I have a 16gb black iPhone and it finally seems like it is working the way it should have when I bought it.
I can’t say it any better than the folks over at Wired so I’ll give you their feedback:
Fewer dropped calls. In a survey conducted by Wired.com, 40 percent of readers report that they’re getting fewer dropped calls than they did before the update. Another 43 percent currently state that the update has made no change one way or the other, while 15 percent state that they’re getting more dropped calls than ever. Upshot: The new software probably won’t hurt your calls, and might lead to fewer dropped ones.
Increased 3G download speeds. “We’re seeing an overall more consistent kbps score and the number of 3G tests where the user scored a real low 100kbps — 300kbps is down,” said Donovan Lewis, the administrator of Test My iPhone, in an article on Cult of Mac. In other words: Fewer people are seeing very slow 3G speeds, and (presumably) more people are seeing faster speeds.
Faster application installation. Ars Technica reports that applications are quicker to install under iPhone 2.1. Also, they report that there’s less lag when opening, browsing and searching an address book of about 600 contacts. (On my own iPhone, with nearly 2,000 contacts, the contacts lag is only slightly minimized.)
Better song info and recommendations. As Gadget Lab reported last week, the iPhone’s list of songs now displays an extra line of information about each track. There’s also the much-vaunted “Genius” recommendation feature, which suggests additional songs you might want to buy based on what you’re listening to now.
More bars. Many reviewers are reporting that phone reception in general is better. In many cases reviewers say that the signal-strength indicator in the corner immediately added bars after the update finished installing. Just a trick? Probably not, since most reports agree that reception is indeed better.
Reduced backup time. One complaint about previous versions was that the “backup” phase of iPhone syncing took way too long — 20 minutes or more. That problem appears to be fixed now, according to Gizmodo.
I woke up this morning to find a nice little email from Adobe in my Inbox. They are taking sign ups for a September 23 web broadcast event. There isn’t a whole lot more info than that at present. It really doesn’t seem like CS3 hit all that long ago. I still don’t use half the new features anyways.
Click the image above to follow through to the signup. I’ll probably watch it and let everyone know whats up. And by the way, I’m all for a little outter glow, but this looks ghetto. Adobe….
Just in time for game day tomorrow!
When you move away from the college town you grew up in (Eugene, OR) you gain a greater respect for not only your football team, but your conference. I’m so tired of hearing about the Big Ten and the SEC. Anyways, I created an entire Pac-10 set of iPhone wallpapers against a nice black leather background. They’re free. Leave me a comment if you like ‘em!
Considering the massive amount of traffic this page is receiving, I’m willing to do wallpapers for other conferences if I get five or more requests in the comments.
First, what is browser default styling and why do I want to reset it? Let me tell you. Just like people, all browsers think they know what’s best for them. (Aside from OJ Simpson who obviously has no clue how to stay out of trouble.) If you were to deploy a html page with “Hello World” in a h1 tag you would by default have black text at a predetermined font size with a 10px padding applied to the body. Etc, etc, etc.
All browsers will behave somewhat differently when handling your elements, which can lead to a broken keyboards, monitors being throw out windows, and mice being used as projectiles. So wouldn’t it be nice to even the playing field at the start of every project and reset everything? The answer is of course, “Yes Matt, you are right…again.”
However, I can’t take credit for the solution I use every time I begin a new website. The solution, albeit simple, was already out there for the taking. Eric over at meyerweb.com already has a nifty solution.
When you first open up your main CSS file just paste in the following code at the top before anything else and you’re ready to go.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
Why use Google as a search engine?
Short answer…because it’s Google. But in reality, the WordPress search engine isn’t all that great. (Sorry WP) It does an adequate job at times, but just can’t compete with the likes of Google. WP will only return a list of blog entries rather than specific pages. Imagine being returned a 12 page tutorial post and having to click through all the pages until you find the relevant page. No thanks.
In addition to the better search results you have the option of monetizing your blog with the ads in the search results. You don’t have to do this, but it certainly is an easy way to make a few extra bucks. The choice of whether to deploy ads is always a sticky one and should be left up to the individual designer. My take, I give everything away for free and the ads are my only compensation. If you are planning on adding ads you can start at Step 7, but use the theory described in steps 1-6. Google AdSense allows you to add your search engine from your account there.
The theory: What we are essentially going to do is sign up for a custom Google search engine. We’ll then create a page via WordPress that will house the search results. After that we will create a page template to use with the page we just created. And then you’ll have your very own search engine.
Login in to WordPress and create a new page. Title it something like “Search.” Write down the URL/Permalink that is just under the title text box. We will need this in a little bit.
You need to go to Google’s Search Engine site and start by clicking “Create a Custom Search Engine.”
Once you’re all signed up you’ll need to “Create a Custom Search Engine.” The “Basic information” category should be self explanatory. Google lists examples under each text field.
What do you want to search?
You need to click “Only sites I select” and then fill in the URL of your site below:
You’ll probably want to finish this page off by selecting “Standard edition.” Finally, agree to the terms of service and click next.
Assuming your site isn’t brand new and has been crawled before you can now preview a search if you want to. Or just skip that step and click finish. You will then be sent to your search engine page where you will want to click on “control panel” for your respective search engine.
There are a slew of options here in the control panel. You can pour through this all yourself, but I would definitely check out the “look and feel” portion. This section allows you to customize the way your results will be displayed.
At this point all the other tutorials and help I saw on the internet seemed to drop off. My method keeps things pretty simple provided you can cut and paste code. You will first want to click on “Code” in the control panel.
When you go here you’ll want to make sure you select “Host results on your website.” Ensure iframe is selected via the radio button. You’ll now need to enter in the URL of the link you wrote down earlier. It is the reference to the page that will house your search results.
Now here is the trick. Open a php page from your WordPress theme. Single.php will probably work the best. Save it as something new like googleSearch.php.
At the top of that php file you will need the following:
/*
Template Name: Google Search
*/
[/php]
This is important because it allows WordPress to recognize this document as a page template. Once you have added that code you need to copy and paste the following code from “Search results code” into your container div:
After this step you can upload this template file (googleSearch.php) into your theme directory.
Now that you’ve added the code to your search results page, you’ll want to add the code for the search box itself. This is pretty self explanatory. Copy and paste the code in the “Search box code” text field into your sidebar, header, etc. I’ll leave it up to you where you want your search box to be.
Log back into WordPress and go back and manage the search page you created earlier. There is a section called “Page Template” that will allow you to choose and apply a template. We want to apply our Google Search template in this case.
Save your page and you are essentially done. Congratulations! Feel free to open up your blog and give it a try.
Some of you may want to include ads in the search results. You will need to sign up and be approved with Google AdSense, which is a process I won’t cover here.
Once you’re all signed up you can login to AdSense and and click AdSense Setup. Once there you will see an “AdSense for Search” link. Click this and you can basically follow the steps from above albeit slightly modified due to the difference in Google’s two products.
If enough people can’t figure this out, let me know in the comments and I’ll detail it out more. Yay for relevant search results!
Let’s assume you are developing your new WordPress theme and you find the need to have a categorical listing of titles for a particular category. For example, you have a category “Giant Robots” and you would like to show your users the five most recent posts in your sidebar. However, you don’t want the content or excerpt to show. You only want post titles. No sweat.
Before we get to the necessary code you will probably want to install the following plugin if you haven’t already. Somewhere along WordPress felt like we didn’t need to know the ID’s of our categories, but it is crucial for something like this. This plugin remedies the problem by revealing the ID’s to us in the dashboard.
You can really use this method anywhere. Use it in the sidebar, a page of categories, or the footer. I’ve used the methods in my own tutorials section if you need a live version of what we’re talking about.
The first thing we’ll do is give our category listing a title:
<h2><a href="<?php echo get_category_link(2); ?>">Giant Robots <span class="viewAll">(view all&$8230;)</span></a></h2>
Explanation: The first thing to notice is here is the number “2″ within get_category_link();. This represents the category ID. To find this you’ll need to install the plugin mentioned previously and login in to your dashboard. Then click manage->categories and you should see the ID in parentheses next to your desired category.
Next, we’ll create a list that displays the titles of our category:
<ul>
<li>
<a title="Permanent link to <?php the_title(); ?>" rel="bookmark" href="<?php the_permalink() ?>"></a></li>
</ul>
Explanation: We start with an unordered list to house everything in. We define the variable $myposts. Again, we must insert the correct category ID, which in our case is “2.” &numberposts=5 simply means that we are limiting the number of listings to 5. Insert whatever number you like.
Then a simple foreach() loop runs through and lists out all the titles with the appropriate permalinks. Finally, it is up to you to use CSS to style the list however you would like. I’ll leave that goodness up to you.
Hopefully this makes sense and you can make good use of it in your WordPress site. If there are questions, just post them in the comments.
It’s official, Google is entering the browser market with an open source browser of their own. Chrome. I haven’t yet been able to find an official download link for the beta, (It’s right here). This will be an interesting new addition to the browser wars. Here is a quick rundown of the features.
- Open source, built from scratch
- Make use of a JavaScript virtual machine called V8
- Support multiple processes so each tab runs in isolation so bugs and slow-downs only hit a single tab (creating what’s called in the comic book a “sad tab”) rather than bring the browser crashing down
- Revolutionary use of tabs (the tabs will be at the top of the window rather than below the address bar
- Incognito mode that kinda sounds like Internet Explorer’s InPrivate mode
- Make use of WebKit open source rendering engine
- Plugins removed from the rendering process and placed in a separate process
- Web app support
- Whiz-bang address bar called “Omnibox”
It’s interesting that Google would attack this market considering their long standing relationship with Firefox. It’s probably too early to tell what this will mean for all the browsers, and not just Firefox. I also have been hearing that they plan on bundling a lot of their other services with the browser.
I’m sure more news will surface in the days to come, but for us it means yet another browser to have to test in. *Sigh*
Well, just finished another project. This one was for the Oregon Ducks. It’s a position by position breakdown of where the players stand as they go through fall camp. Unfortunately, our quarterback Nate Costa re-injured his knee and he’ll be out for a while.
The carousel was fun to code. Had to dust of the math books and reacquaint myself with sine and cosine. When the carousel is loaded it checks a single XML file that references all the text and image assets to pull in. This made it an expandable enough platform that they were able to port it over to soccer and volleyball.
In addition to the carousel I wrote my own custom scroll bar class. Don’t worry, I’ll be giving it away on this site a little later. I’m planning on making the scroll bar more dynamic and with more options such as arrows. It’s a nice class because it works even when you’re feeding in external text. Some of the other scroll bar classes I found all required you to have preexisting text on the stage. And well, that’s just not very dynamic now is it.
Lastly, with the exception of the quarterback and special teams, I took all the photography for the app. I’m just sad I won’t be able to be on the sidelines taking photos this season. :( I guess the pow at Alta will have to be my therapy for missing Duck games.
