BIANCHI Enterprises

Create A Portfolio In PhotoShop

admin — Thu, 22 Jul 2010 14:06:58 +0000

Portfolios can be very hard to create when you don’t have inspiration or are just beginning in the web design field. In this tutorial you will be exposed to simple techniques as well as a few more complex skills. When you’ve completed the tutorial your new layout will look like this:

Enjoy!

Step 1

Create a new document (w)1360px x (h)1900px background #ffffff
Note: To turn on your ruler and guide lines you must first go to View>>ruler and that turns on your ruler. To turn on your guide lines press CTRL + ; or CMD + ;

Step 2

Now drag the left guide line to the 200px line and on right drag it to the 1160px mark. There should be 200px of space on both sides leaving 960px in between.

Step 3

Select the rectangle tool color #00000 and create a rectangle box about 50px in height at the top of your canvas.
Note: The blue lines that are horizontal are 1px solid #00cef3.

Step 4

Now Select the type tool color:#00cef3, font: steiner, size: 54px, and create a name for your website. I’ve chosen Abstrolio.

Step 5

Select the custom shape tool panel and choose any symbol for your logo. I’ve chosen the seal custom shape. After you’ve gotten your custom shape, right click on the shape layer>>blending options. Select gradient and double click on the gradient bar. Left color:#00cef3, right color:#7cf4ff then press ok. Now select the type tool and add one letter to your logo symbol.

Step 6

Select the type tool font: veranda, size:14px, color:#fff and create your menu links. The most common portfolio links are Home, About, Services, Portfolio and Contact. After you have your menu links created select the rounded rectangle tool color:#00cef3 and create a rectangle behind the home word (for hover purposes). Then highlight just the home text and change the color to #000000.

Step 7

Next we will be creating our full width page slider. Grab any image you would like and create a full width slider for your portfolio layout. The height of the image should be 400px x 1360px wide.

Step 8

Select the type tool font: steiner, size: 24px, and align text center, then create a brief description about your company or service.

Step 9

Now we’re going to create a press effect with the line tool. Select the line tool 1px color:#eaeaea and create a 1px line across the document right under your brief description. Then create a new 1px line color:#fffff right directly under your first line and that should give you a press effect.

Step 10

Select the type tool font: steiner, size: 24px, and create one of the headings for your portfolio. Then select the type tool again. Change the font to arial and the size to 13px and create
dummy text for your paragraph. I usually just use lorem ispum.

Step 11

Now select the rounded rectangle tool color:#00cef3 and create a small rectangle. Then create a read more text color:#ffffff over your button.

Step 12

Now add your heading, paragraph and button to a group and duplicate the group 2 times. Then change the other 2 headings.

Step 13

Earlier in this tutorial we created a 2px press effect. Copy and duplicate that layer and drag it under your headings. It will all be one line but if you select the eraser tool and erase the space in
between, each heading press effect will be separated.

Step 14

Now select the rectangle tool color:#000000 and create a rectangle box; height 850px to hold our portfolio items and text. There should be white space below the portfolio container.

Step 15

Select the type tool font: steiner, size: 24px, color:#ffffff and create the portfolio title and then create a another brief description that describes your service.

Step 16

Next we’re going to create our portfolio items. We’re going to have 3 items per row with 10px to the left and between each item. The height of the box is 300px and the width of it is 310px.

Step 17

Now add some portfolio items to your portfolio section.

Step 18

Select the type tool (Click and hold to bring up single line text) font:arial, size:13px, and create your copyright text. Then hit your spacebar and to the right create the top text. Now you’re finished
and should have a nice portfolio layout.

Download

If you would like to download the .psd file for this tutorial, click here.

Create A Web Design Portfolio Layout In PhotoShop

Flash Design Showcase

admin — Wed, 21 Jul 2010 12:26:32 +0000

This week I’ve found a whole host of beautifully designed flash websites for you to find some inspiration from.

Reserved

Appleton Estate

The Secret Annex

Hey Papa Legend Studios

L’Oreal

Bacardi

Nissan Leaf

Nissan Shift

San Diego Zoo

Kin

UFC 116

SoBe

Pilot Handwriting

Nike Bloed Oranje

David Hsia

Weekly Web Design Inspiration #60

admin — Mon, 05 Jul 2010 16:27:43 +0000

A week of fabulous web design here for you to feast your eyes on.

Thomas Bishop

Web Contact

Komrade

Jack Jaselli

Track Record

Enliven

Mealeo

Twelve South

Sanctuary T Shop

Baney Design

The Mid-Century Modernist

Process Type Foundry

Collision

CG Inspired

Paper Wireframes

Bundle Hunt

Roadify

Forever Heavy

Le Chti

Create a Cool Slide Out Panel, CSS3 only

admin — Mon, 05 Jul 2010 16:23:38 +0000

Many sites have a really cool hidden panel which contains some relevant information and this panel is revealed to us, with a cool animation, when we click on a particular button or hover over it. This has usually been achieved using jQuery. But now as we advent towards the future and CSS3 is becoming a reality, here is a tutorial on how to build an animated slide out panel using only CSS3.

Note: This tutorial uses some advanced css3 techniques which are not yet supported in Firefox. To get the full version, you should see the live demo in a web-kit engine for example Safari and Chrome. You can download the source code here. The final demo can also be seen here.

Step 1: Analyzing the Goal

A slide out panel can be used for various ways. Its uses depend on the requirement of the site. One may use it for a slide out login box or for just listing the subscribing options for the site. We are going to assume a scenario where we want a subscribe option for the viewers on the top right hand corner of the screen:

Now once the viewer hovers over the subscribe button on the top right hand corner, the whole hidden panel will come sliding down with a very smooth animation effect revealing the subscribing options to the visitor.

Step 2: Creating the xHTML skeleton

Now that we know what we want to achieve, lets plan out how the xHTML architecture of the whole layout is going to be. We would basically need two parts of the layout. One part will be the top one, which will be our hidden panel and will contain the subscribing options. The second part will be the main content area for the whole layout. This area will contain everything which will be visible to the viewer. Here is how our code for the website layout is going to be:

view source

print ?

`01`	`DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`

`02`	`xmlns="http://www.w3.org/1999/xhtml">`

03 <head>

`04`	`<meta` `content="text/html; charset=utf-8"` `http-equiv="Content-Type"` `/>`

`05`	`<meta` `http-equiv="X-UA-Compatible"` `content="IE=EmulateIE7"` `/>`

`06`	`<link` `href="css/styles.css"` `rel="stylesheet"` `type="text/css"` `/>`

07 head>

08

09 <body>

`10`	`<div` `id="slide-out">`

`11`	`<div` `id="subscribe"` `class="page-wrap">`

12 <ul>

13

`14`	`<li><a` `class=">rssa>li>`

`15`	`<a` `class=">" href="#">RSSa>`

`16`	`<li` `><a` `class="fb"` `href="#">Facebooka>li>`

`17`	`<li><a` `class="twitter"` `href="#">Twittera>li>`

`18`	`<li><a` `class="mail"` `href="#">Maila>li>`

19 ul>

`20`	`<div` `class="clear">div>`

`21`	`<a` `href="#"` `class="button">Subscribe!a>`

22 div>

23 div>

`24`	`<div` `id="main-container">`

`25`	`<div` `class="page-wrap">`

`26`	`<h1>CSS3 : The Future is Near!`

`27`	`<h3>Hover over the subscribe button to see the cool slide effect created by using CSS3 purely.<small>Best viewed on Chrome and Safarismall>`

`28`	`Integer eu nunc in eros lobortis blandit. Suspendisse potenti.`

`29`	`Nunc porta tellus nec velit vehicula sodales. Aliquam vel grav`

30 div>

31 div>

32 body>

33 html>

The body is divided into two parts, the slide-out and the
main-container. The slide out division contains the subscribe links along with the subscribe hyperlink button. Note that we have given a class of button to the subscribe hyperlink. The main container contains all the sites main text and information. Both the slide-out division and the main container division are assigned a
page wrap class to keep them aligned centered in the screen.

Step 3: Styling the basic layout

The style-sheet just contains some simple styling of the page. As explained above, there will be one slide-out division, one main container and one page-wrap class. These forms the basic styling elements of our page which give it the look we want.

The CSS for styling the basic layout of the page is as follows:

view source

print ?

`01`	`@import` `url('reset.css');`

02 body{

`03`	`color:` `#484848;`

`04`	`background-color:` `#f7f7f7;`

05 }

`06`	`.clear {`

`07`	`clear:` `both;`

08 }

09 h1{

`10`	`font-size:` `58px;`

`11`	`margin-bottom:` `25px;`

`12`	`height:` `68px;`

13 }

14 h3{

`15`	`font-size:` `22px;`

`16`	`margin-bottom:` `25px;`

17 }

18 p{

`19`	`text-align:` `left;`

`20`	`margin-bottom:` `20px;`

21 }

`22`	`#slide-out {`

`23`	`background-color:` `#686868;`

`24`	`height:` `73px;`

`25`	`color:` `#fff;`

`26`	`position:` `relative` `;`

`27`	`padding-top:` `25px;`

28 }

`29`	`.page-wrap {`

`30`	`position:` `relative;`

`31`	`margin-right:` `auto;`

`32`	`margin-left:` `auto;`

`33`	`width:` `635px;`

34 }

`35`	`#main-container{`

`36`	`border-top:thick` `solid` `#484848;`

`37`	`padding-top:` `60px;`

`38`	`text-align:` `center;`

39 }

`40`	`.button{`

`41`	`background-image:url("../images/button.png");`

`42`	`color:#FFFFFF;`

`43`	`display:block;`

`44`	`font-size:18px;`

`45`	`height:28px;`

`46`	`padding-top:5px;`

`47`	`text-align:center;`

`48`	`text-decoration:none;`

`49`	`width:105px;`

50 }

`51`	`#subscribe ul li a{`

`52`	`background-repeat:no-repeat;`

`53`	`display:block;`

`54`	`float:left;`

`55`	`font-size:24px;`

`56`	`height:38px;`

`57`	`margin:` `0px` `20px;`

`58`	`padding:` `10px` `0px` `0px` `55px;`

`59`	`color:` `#d3d3d3;`

`60`	`text-decoration:` `none;`

`61`	`line-height:` `normal;`

62 }

`63`	`#subscribe ul li a:hover{`

`64`	`color:` `#fff;`

65 }

66 .rss{

`67`	`background-image:` `url('../images/rss.png');`

68 }

69 .fb{

`70`	`background-image:` `url('../images/facebook.png');`

71 }

`72`	`.twitter{`

`73`	`background-image:` `url('../images/twitter.png');`

74 }

75 .mail{

`76`	`background-image:` `url('../images/mail-rss.png');`

`77`	`margin:` `0px;`

78 }

After we have applied the basic styling to our page, it would look somewhat like this

Now that the basic styling of the page is done, we have to set the stage for the panel to hide and show. To achieve that, the first thing we need to do is get the subscribe hyperlink to the bottom right corner of the slide-out division such that it is just peeping out of it. To do this, we have to manipulate the button class in the style-sheet a bit. We are going to make its positioning absolute and then give its right attribute a value of 0px. This will push the subscribe button to the right of the division as shown in the image below.

Now we have to just push it down such that it sticks to the foot of the slide-out division. To do that we just have to assign a
negative 63px value to the bottom attribute.

Now that our subscribe button is at its proper place, all we have to do is push the slide-out div out of the screen. To do this, all we have to do is assign a negative margin equivalent to the height of the slide-out div. To prevent the step down bug in IE6, we also have to assign a line-height value of 0 px to the container of our subscribe links i.e. the subscribe box. To negate the 0 line height on the hyperlink elements, we have to assign a normal line height to them too. After modifying our button class, the slide-out id, the subscribe link elements and the subscribe id styles, they will now look like this:

view source

print ?

`01`	`#slide-out {`

`02`	`background-color:` `#686868;`

`03`	`height:` `73px;`

`04`	`color:` `#fff;`

`05`	`position:` `relative` `;`

`06`	`padding-top:` `25px;`

`07`	`margin-top:` `-98px;`

08 }

`09`	`#subscribe{`

`10`	`line-height:` `0px;`

11 }

`12`	`.button{`

`13`	`background-image:url("../images/button.png");`

`14`	`bottom:-63px;`

`15`	`color:#FFFFFF;`

`16`	`display:block;`

`17`	`font-size:18px;`

`18`	`height:28px;`

`19`	`padding-top:5px;`

`20`	`position:absolute;`

`21`	`right:0;`

`22`	`text-align:center;`

`23`	`text-decoration:none;`

`24`	`width:105px;`

`25`	`z-index:100;`

`26`	`line-height:` `normal;`

27 }

`28`	`#subscribe ul li a{`

`29`	`background-repeat:no-repeat;`

`30`	`display:block;`

`31`	`float:left;`

`32`	`font-size:24px;`

`33`	`height:38px;`

`34`	`margin:` `0px` `20px;`

`35`	`padding:` `10px` `0px` `0px` `55px;`

`36`	`color:` `#d3d3d3;`

`37`	`text-decoration:` `none;`

`38`	`line-height:` `normal;`

39 }

We all hate Internet Explorer 6 a lot because we always have to add some extra code especially for it. In this case also we would have to do the same. To make the layout look the same as in the other browsers, we have to add some IE6 specific styling at the top of our html page, in the head section.

view source

print ?

01

Now that the slide-out panel is hidden, our task is to enable the hover event on the subscribe button such that the slide-out div reveals itself from the top of the page. You might ask why we have put the subscribe link in the slide-out panel and pushed it outside into the main container, rather than placing it in the main container itself.

The reason behind it is that, we have assigned a negative margin to the slide-out div and pushed it out of the screen. To make it visible again, we have allotted a hover event on it which makes it margin back to 0. As the slide-out div is out of the screen, so it is a difficult process to hover over it. Now because the subscribe hyperlink is actually inside the slide-out div, hence hovering over the subscribe link also acts as a hover event of the slide-out dive making its top-margin 0 and revealing it.

We can imagine the slide-out div to be a person who is hiding and just his hand is visible to us. When we touch the hand, the person comes out. The hover event which will make the slide-out div pop out of the top of the browser on hovering over the subscribe button will be as follows

view source

print ?

`1`	`#slide-out:hover{`

`2`	`margin-top:` `0px;`

3 }

Step 4: The CSS3 Factor!

We are almost at the end of our tutorial. The hover event is set. The slide-out div reveals itself when we hover over the subscribe button. But the whole process happens without any animation effect. The only thing required now is to spice up the whole thing with a pinch of CSS3.Using the transition property in CSS3 we will make the effect as a smooth animation rather than the abrupt effect it has right now. We will give the transition property in the slide-out id style as we are changing its styling on hover. After modifying the slide-out id style, it will look like this:

view source

print ?

`01`	`#slide-out {`

`02`	`-moz-transition:` `all` `1s ease-in-out;`

`03`	`-webkit-transition:` `all` `1s ease-in-out;`

`04`	`-o-transition:` `all` `1s ease-in-out;`

`05`	`transition:` `all` `1s ease-in-out;`

`06`	`background-color:` `#686868;`

`07`	`height:` `73px;`

`08`	`color:` `#fff;`

`09`	`position:` `relative;`

`10`	`padding-top:` `25px;`

`11`	`margin-top:` `-98px;`

12 }

You can change the animation speed by changing the transition speed which is set to 1s at present. This completes our task of enabling a smooth slide out panel from the top of our page without using any javascript.

The Drawbacks

The main drawback of this method at present is that CSS3 transition effect is only supported by webkit browsers like Google’s Chrome, Apple’s Safari and Opera. Even though the slide-out panel on hover would work on other browsers like Firefox and Internet Explorer, but the animation wont work in them. The other drawback is that it wont work on Internet Explorer 6.0 because it doesn’t support the CSS hover event. But there is obviously a solution for this.

Conclusion

This trick just displays how we can use CSS3 to replace some of the major effects provided by JavaScript libraries like jQuery and MooTools. I believe that with time, these basic transition effects will be replaced with CSS3 transition only. It makes the rendering faster and the load time also decreases as the JavaScript libraries plug-ins are not required. There are many ways of creating a slide out panel and JavaScript libraries really take this to a very high level and provide more functionality than just animation effect. There are many tutorials out there which guide you to create a slide out panel like that using jQuery and CSS together. For further reading related to slide out panels using JavaScript, you can refer to these awesome tutorials

Bark Mobile

admin — Thu, 03 Jun 2010 22:01:47 +0000

Lund Int.

admin — Thu, 03 Jun 2010 22:00:39 +0000

Fouts Bros

admin — Thu, 03 Jun 2010 21:58:37 +0000

Carolina West Mobile

admin — Thu, 03 Jun 2010 21:57:08 +0000

Best Ways to Transfer Domain

admin — Sun, 30 May 2010 17:47:16 +0000

If you’re not happy with your current website host, there are many out there to choose from. It seems like everywhere you look, there is an advertisement for cheap hosting services. However, when it comes time to transfer, domain problems can begin. You want a host that can walk you through each step of the process to help you make the transition as smooth as possible. Usually, the best time for switching hosts is at your renewal time. This means that you won’t have to pay for hosting service twice. However, if you choose to renew before your time is over, you could find great difficulty actually getting any refund back for the months of hosting that are left when you transfer domain options.

At renewal, there may be a couple of things that happen. If you didn’t specifically state that you didn’t want automatic renewal, then your credit card will more than likely be billed automatically. It is usually done for the same amount of time that you had initially and they send out email reminders beginning about a month beforehand. If this method of payment fails, your hosting will be cancelled and your website will be taken down. This can cost you a lot of potential sales and some customers may just assume that your company is out of business.

For those companies that want to transfer domain, then you want to choose a hosting company that gives you some extras. If you have a large site, then take note of the amount of web space that you will be allowed with each of their plans. You may need email or web design tools to make it all easier. However, if you choose a company that doesn’t provide anything but template services, then you may not be able to upload your current website to their server. Find a hosting company that will walk you through this process and talk with them before you make the switch to see what exactly they can offer.

Choosing a new host can be somewhat confusing, simply because there are so many. Look for a host company that will transfer domain for no charge with the purchase of a hosting plan. You want one that has high uptime percentage and one that offers a money back guarantee if you’re not satisfied. Look for reviews from previous customers and see what their renewal rate is. All of this will tell you if this host company is one that will work well for your needs. While it may not seem like such a big deal, if the company doesn’t perform as expected, your website may be down when you need it the most.

In closing, if you’re going to transfer domain, it’s best to do it at renewal to avoid paying for hosting twice. Look for a company that will give you free tools for your website and make sure you do a check to see what companies should be avoided. Keeping your website up and live is one of the most important aspects of any business today.

Summary

OverServ is dedicated to providing the best service for domain registration, renewal, or when you want to transfer domain. Check out what this company can offer for a very affordable price.

http://overserv.net

Hosting And Web Hosting

admin — Sun, 30 May 2010 17:42:34 +0000

How much are you paying for your web hosting? Chances are that you are paying a lot more for hosting than you have to and not even getting a lot of space or bandwidth if you are with a larger hosting company. Many of the companies that are the most well known are charging a lot more for this service than is needed. You can get web hosting for your website for less than five dollars a month that does not include a long term contract.

In order for you to get cheap hosting at some sites, you have to have a contract with them for at least a year. You get the minimum of what they have to offer when it comes to space for your website, the amount of email accounts you can have as well as bandwidth. You can do better if you take the time and look around online. There are many more options available out there when it comes to getting hosting for your website that will cost you a lot less money.

If you are planning on making money online in any way, promoting yourself, your art or books or any other type of product or service, then you need to have your own website. This is a must for anyone who wants to be taken seriously on the internet. The website should be professional looking and make your customers feel as though they are dealing with a professional company. There should be enough space for you to expand your website as well as a private email account. You need to make sure that there is proper bandwidth as well when you are looking for web hosting. This controls the amount of people who can visit your site at one time. The last thing that you want to do is to have a hosting site that goes down all of the time because you do not have the proper amount of bandwidth.

You do not have to spend a lot of money for web hosting at all. If you think that this is going to cost you hundreds of dollars for features like domain registration, email accounts, space and bandwidth, think again. You can get hosting for a lot less today than you could years ago. Your only job then is to lead people to your website so that they can see your products and services, which they can get when they go to your site through ads as well as through the search engines. This is the way that you can promote anything on the internet and make money online.

Those who are just starting out may be tempted to go with larger companies thinking that they are getting a better deal. However, if you take a look around, you can find a good web hosting company that will give you a lot more for your money. You need to have reliable hosting when you have your own website online so that people can find you and visit your site without any problems. You can get this with companies that charge as little as less than five dollars a month.

Resource: If you have a business, you need a website that will require hosting. For the best web hosting at the best price, go to Overserv.

http://overserv.net