If you don't know much about Justin Bieber's rise to superstardom, James Parker provides a good primer:
How did he do it? With YouTube, that’s how. Kissed in his cradle by the witch of the Web, Justin was throwing up little promo reels by the time he was 12. Singing a Brian McKnight song into the bathroom mirror. Or sitting on some municipal steps somewhere, busking mightily about the Lord: “You’re my God and my Fa-ther!” he bellows through the legs of passersby, the wooden body of his guitar reverberating with his shouts. ...
Bieber wasn’t from the Disney factory, and he didn’t have a show on Nickelodeon, so the marketing plan was skewed toward his already established constituency in social media: lots of Facebooking and YouTubing and sugary tweets to his millions-strong Twitter army.
Surface Encounters
LeBron James of Miami Heat delayed by Cleveland Cavaliers garage parking security
LeBron James was delayed in getting into the arena for the Miami Heat's shootaround Tuesday morning when he arrived with a driver and with a second car at the entrance for the Cavs' underground garage parking lot.
Surface Encounters
Sony delays PlayStation Rewards scheme PlayStation 3 <b>News</b> - Page 1 <b>...</b>
Read our PlayStation 3 news of Sony delays PlayStation Rewards scheme.
Surface Encounters
REPORT: <b>News</b> Corp. In Talks To Hand Over Control Of MySpace To <b>...</b>
News Corp. is in preliminary talks to give control of Myspace to Vevo.com, the site partly owned by top record companies, including Universal Music and Sony Music, according to a Bloomberg report. News Corp. has been looking to unload ...
Surface Encounters
I read an interesting article this morning that suggested Apple would change its mind and put Adobe’s Flash technology on its iOS devices within a year. I don’t think that’s going to happen.
In an open letter to users, Apple CEO Steve Jobs gave several reasons why he didn’t want Flash on the iPad, iPhone or iPod touch. They are: Flash isn’t open; the full web; reliability, security and performance; battery life; and touch.
Adobe began shipping Flash Player 10.1 for Mobile last June, but even Laptop magazine admitted that “Steve Jobs was right,” and that “Adobe’s offering seems like it’s too little, too late.” Granted, that report was from six months ago, but it still doesn’t bode well for the technology.
There is no doubt that Adobe is making advances with Flash on mobile devices, but I don’t believe future changes will be enough to get Apple to adopt the technology.
Jobs has been very clear that Apple supports HTML5, an open technology that is controlled by a standards committee, not one company. By building support for that technology into Webkit, Apple is ensuring that mobile Web browsers will be able to access what we’ve come to know as the “full web.”
Webkit is used by Google, Palm, Nokia and RIM, so it has a pretty solid base.
One of the arguments often bantered about when the discussion of the “full Web” comes up is video. There is no doubt that Flash made huge strides over the years in having sites like YouTube encode their videos in Flash. But that’s for the desktop.
As Jobs points out, almost all of this video is also available in H.264 format (a format Flash also supports), so it’s viewable on the iPhone, iPad and iPod touch.
“Add to this video from Vimeo, Netflix, Facebook, ABC, CBS, CNN, MSNBC, Fox News, ESPN, NPR, Time, The New York Times, The Wall Street Journal, Sports Illustrated, People, National Geographic, and many, many others. iPhone, iPod and iPad users aren’t missing much video,” wrote Jobs.
You may ask why other companies adopted Flash for their mobile devices when Apple won’t. That’s easy, they are looking for something they have that Apple doesn’t. Considering how hard it is for tablet makers to compete with Apple, any perceived advantage will work.
I’m not an Adobe hater—I know quite a few people that work at Adobe and I think they’ve done some amazing things over the years. Flash for mobile devices isn’t one of them.
Chris Dawson said he gives “Apple a year until they cave [and adopt Flash]. Android tablets will just be too cool and too useful for both entertainment and enterprise applications if they don’t.”
I have been using my iPhone for years and my iPad for one year. I honestly can’t remember the last time I went to a Web site that wouldn’t load because I didn’t have Flash installed. I can load videos from YouTube and a host of other sites too, no problem.
Apple has sold more than 160 million iOS devices and there are no screaming, angry hordes of users breaking down the doors at 1 Infinite Loop demanding Flash on their devices.
In order for Apple to change its mind and adopt Flash, the technology has to be proven to be indispensable and that it will benefit its users. Apple has proven just the opposite is true.
Editor’s Note: Jim Dalrymple has been writing about Apple for more than 15 years. You can follow him on Twitter @jdalrymple and on his Web site at The Loop.
Surface Encounters
Surface Encounters
Preview of Final Result
Resources
- PT Sans Bold – FontSquirrel
- Free App Icons for Developers – WebAppers
Step 1
Open Photoshop and create a new document that is 1200 x 1200 pixels, 72 dpi, and RGB Color. Fill the layer with white. (Ctrl+Backspace or Delete)
Step 2
Now create a rectangle for the header and fill it with a white-grey color, then use the colors on the image for the “Gradient Overlay”. Our search and logo will eventually be part of the header.
Step 3
Create a new rectangle above the previous one, with attributes as shown below. The following drop shadow effect creates a look of a 1 pixel stroke which does increase the look of that simple bar. Note: this step creates a horizontal line.
Step 4
Now add the “Gradient Overlay” layer style with the hex codes indicated.
Step 5
Add a white 1 pixel stroke. The following stroke of 1 pixel will divide the grey shadow effect. It’ll eventually work as a divider.
Step 6
Make one more rectangle in the middle-right zone, and fill it with white and add a 1 px stroke as indicated – it will be our search box.
Step 7
One more rectangle should be created and filled with blue. Set the inner shadow as indicated below, this will be our search button. This blue works great in combination with grey, white and light-grey. Blue will be the major contrasting color we use as we work through this template.
Step 8
Add the Gradient Overlay details to the button with the details from image.
Step 9
Add a 1 px stroke to the button with the color indicated. Take a look at the first and the final result of the button so you can see the difference all these details made.
Step 10
Now add this drop shadow effect for the text placed in the search box, using PT Sans Bold. This will be the final step in creating your search button. You may want to try other fonts, but the PT Sans Bold is really good for this small button.
Step 11
Make another fill under the header section, this will be the navigation area. Here we will place the navigation links of our template.
Step 12
Write your navigation links using a dark-grey color, then add a white “drop shadow” effect. The effect used for the navigation links is the same used for the search button.
Step 13
With 1px vertical line, make divisions between each links. The lines should be black and will really increase the beauty of the navigation area.
Step 14
Over the home section, make a fill with the blue and then add a Gradient Overlay style as indicated.
Step 15
Copy the Home link, this time color it white and add a drop shadow effect.
Step 16
Create a big, grey zone under the navigation, it should be about 30% of the layout. This will be the background for the featured area.
Step 17
Now create a big, white rectangle and add some shadow with the details shown. A big stock image, a big headline and some text with another great button will be added.
Step 18
Add a any dummy image you want to that featured area. Be sure it covers more than 80% of the area. The one I chose is from a stock website.
Step 19
Add some text to it, use the PT SANS Bold font and make the font big.
Step 20
The remaining area should be filled with grey, in it we’ll place some text. This is really a secondary area which describes the image, the services, the company itself, or whatever you’d like.
Step 21
Place some blue-colored text which will be the title of the information below. Use the details in the image for Drop Shadow style.
Step 22
Add some dummy text. This could be some important information or whatever you’d like.
Step 23
Create another grey area under the featured zone, where we will add some text and icons later. Add the details as stated on the image. Mostly, the icons will promote the services offered by the company behind the website.
Step 24
Continue by adding a Gradient Overlay style for the last rectangle we have created in the anterior steps.
Step 25
Now we are adding titles and icons, as well as some divisions. The icons can be found in the resource list at the beginning of the tutorial. Be sure to choose your icons and text thoughtfully.
Step 26
At the border of both zones, create a small circle and fill it with dark brown color. Add some inner shadow as stated on the image.
Step 27
Continue by adding a drop shadow layer style. It is another small detail, but it really makes that button zone minimalistic, nice-looking and well designed.
Step 28
To finish, add a Gradient Overlay effect.
Step 29
By using the Custom Shape Tool (U), create an arrow in both circles. Now add the details shown on the screenshot.
Step 30
Continue by adding some Color Overlay for the arrow. It should also be a blue color because otherwise, it will not fit the contrast and the colors used on the whole template.
Step 31
Add a video screenshot in the free space and place a title for it. For this template, I have used a simple screenshot of a YouTube widget.
Step 32
Add the text “Product Highlights” and “Case Studies.” Let the text under the “Product Highlights” be links so you could showcase some friends’ websites or resources you admire/promote.
Step 33
Finish it by creating another form for e-mails, place all kind of other information, and whatever you’d like.
Step 34
Don’t forget to make a relevant/small footer for our template. If you have paid attention, you should know how to create the same effect as below.
All done! If you have questions or suggestions, feel free to drop a comment. I hope you enjoyed this whole tutorial!
Preview of Final Result
Resources
- PT Sans Bold – FontSquirrel
- Free App Icons for Developers – WebAppers
Step 1
Open Photoshop and create a new document that is 1200 x 1200 pixels, 72 dpi, and RGB Color. Fill the layer with white. (Ctrl+Backspace or Delete)
Step 2
Now create a rectangle for the header and fill it with a white-grey color, then use the colors on the image for the “Gradient Overlay”. Our search and logo will eventually be part of the header.
Step 3
Create a new rectangle above the previous one, with attributes as shown below. The following drop shadow effect creates a look of a 1 pixel stroke which does increase the look of that simple bar. Note: this step creates a horizontal line.
Step 4
Now add the “Gradient Overlay” layer style with the hex codes indicated.
Step 5
Add a white 1 pixel stroke. The following stroke of 1 pixel will divide the grey shadow effect. It’ll eventually work as a divider.
Step 6
Make one more rectangle in the middle-right zone, and fill it with white and add a 1 px stroke as indicated – it will be our search box.
Step 7
One more rectangle should be created and filled with blue. Set the inner shadow as indicated below, this will be our search button. This blue works great in combination with grey, white and light-grey. Blue will be the major contrasting color we use as we work through this template.
Step 8
Add the Gradient Overlay details to the button with the details from image.
Step 9
Add a 1 px stroke to the button with the color indicated. Take a look at the first and the final result of the button so you can see the difference all these details made.
Step 10
Now add this drop shadow effect for the text placed in the search box, using PT Sans Bold. This will be the final step in creating your search button. You may want to try other fonts, but the PT Sans Bold is really good for this small button.
Step 11
Make another fill under the header section, this will be the navigation area. Here we will place the navigation links of our template.
Step 12
Write your navigation links using a dark-grey color, then add a white “drop shadow” effect. The effect used for the navigation links is the same used for the search button.
Step 13
With 1px vertical line, make divisions between each links. The lines should be black and will really increase the beauty of the navigation area.
Step 14
Over the home section, make a fill with the blue and then add a Gradient Overlay style as indicated.
Step 15
Copy the Home link, this time color it white and add a drop shadow effect.
Step 16
Create a big, grey zone under the navigation, it should be about 30% of the layout. This will be the background for the featured area.
Step 17
Now create a big, white rectangle and add some shadow with the details shown. A big stock image, a big headline and some text with another great button will be added.
Step 18
Add a any dummy image you want to that featured area. Be sure it covers more than 80% of the area. The one I chose is from a stock website.
Step 19
Add some text to it, use the PT SANS Bold font and make the font big.
Step 20
The remaining area should be filled with grey, in it we’ll place some text. This is really a secondary area which describes the image, the services, the company itself, or whatever you’d like.
Step 21
Place some blue-colored text which will be the title of the information below. Use the details in the image for Drop Shadow style.
Step 22
Add some dummy text. This could be some important information or whatever you’d like.
Step 23
Create another grey area under the featured zone, where we will add some text and icons later. Add the details as stated on the image. Mostly, the icons will promote the services offered by the company behind the website.
Step 24
Continue by adding a Gradient Overlay style for the last rectangle we have created in the anterior steps.
Step 25
Now we are adding titles and icons, as well as some divisions. The icons can be found in the resource list at the beginning of the tutorial. Be sure to choose your icons and text thoughtfully.
Step 26
At the border of both zones, create a small circle and fill it with dark brown color. Add some inner shadow as stated on the image.
Step 27
Continue by adding a drop shadow layer style. It is another small detail, but it really makes that button zone minimalistic, nice-looking and well designed.
Step 28
To finish, add a Gradient Overlay effect.
Step 29
By using the Custom Shape Tool (U), create an arrow in both circles. Now add the details shown on the screenshot.
Step 30
Continue by adding some Color Overlay for the arrow. It should also be a blue color because otherwise, it will not fit the contrast and the colors used on the whole template.
Step 31
Add a video screenshot in the free space and place a title for it. For this template, I have used a simple screenshot of a YouTube widget.
Step 32
Add the text “Product Highlights” and “Case Studies.” Let the text under the “Product Highlights” be links so you could showcase some friends’ websites or resources you admire/promote.
Step 33
Finish it by creating another form for e-mails, place all kind of other information, and whatever you’d like.
Step 34
Don’t forget to make a relevant/small footer for our template. If you have paid attention, you should know how to create the same effect as below.
All done! If you have questions or suggestions, feel free to drop a comment. I hope you enjoyed this whole tutorial!
Surface Encounters
'CBS Evening <b>News</b>' Sinks To Record Lows, 'World <b>News</b>' Only Show To <b>...</b>
With the drumbeat of rumors that she is heading for the door, Katie Couric was likely looking for better ratings news than what she got Tuesday. Instead, the ratings for the first quarter of 2011 showed that the "CBS Evening News" drew ...
Surface Encounters
Surface Encounters
Surface Encounters
REPORT: <b>News</b> Corp. In Talks To Hand Over Control Of MySpace To <b>...</b>
News Corp. is in preliminary talks to give control of Myspace to Vevo.com, the site partly owned by top record companies, including Universal Music and Sony Music, according to a Bloomberg report. News Corp. has been looking to unload ...
Surface Encounters
No comments:
Post a Comment