The most promising web development company in the Philippines celebrate its first birthday this 4th of September 2009.
Imashups Web Technology Solutions, founded by Jhondie Abenaza and Mary Ann Payacag, both young “technology entrepreneur”. This young and innovative company is proving that it is possible to buck the trend and prosper in the current economic climate. Boasting a highly skilled creative and technical team, Imashups continues to develop more internet mashups application, hybrid web application, supporting more businesses to establish their web identity & web presence. One year of Imashups have proven its best in developing Joomla!, Drupal, Wordpress & CodeIgniter websites. In the next coming years, Imashups plans to further increase its industry standing, develop new business and deliver new services. Stay tuned, we will mashups the web and the internet. HAPPY 1st BIRTHDAY Imashups !!!
i-mashups logo is now transforming to a new look. Simple, neat, easy to recognize, readable, large text, not more than 3 colors and that’s web 2.0 logo must be. The new logo is more flexible to any background because it can easily modify the color and the edges is not too detailed compare to the previous 3d logo.
In Firefox this is one of the defaults style, having a dotted lines around the links to be able to remove this you just set the link outline to none in your css.
You can specify what state of the link will border not occur.
a, a:visited, a:focus, a:active, a:focus{
outline: none
}
1. Create a new image (ctr + n) with a 600×90 pixel and set a rectangular guide using the ruler. Just drag the ruler guide in the top and left portion of the canvas.
2. Then we will create a rounded rectangular with a gradient color. Using the ‘Rectangular Select Tool’ (R) with a 12px of rounded corners, drag it to your ruler guide.
3. Select ‘Blend Tool’ (L) for our gradient, before that set your foreground color to #7b7b7b and #c1c1c1 as your background color. After you select the blend tool set your ‘gradients’ to FG to BG then drag it to your ruler guide from top to bottom be sure you drag it to the selection area of ‘Rectangular Select Tool’.
4. The first gradient will serve as border, now we will create another gradient for the main texture of menu bar, create a new layer (ctr+shift+n) and add another ruler guide about 2px from the edge of the first gradient as you see the image below.
5. Same as step 3 we will create another gradient using the same color but we will reverse the pattern of gradient, the first gradient start at the top and now we will drag it from the bottom.
And now we’re done in menu bar.
6 . And lastly the menu separator creating a nice effect in menu.
a. Create a new image with a 1×50px. Select ‘Blend Tool’ (L) > ‘Gradient’ > ‘Open the gradient selection dialog’. Or simply press the rightmost button.
b. In the gradients dialog create new gradient then right click to it and select ‘Edit Gradient…’
c. After you create the new gradient right click in the gradient editor and select ‘Split Segment at Midpoint’.
d. And it should be look like this, the black arrow is the end point color and we will edit it by selecting each black arrow same as the gradient color of menu bar.
e. To edit the color just right click and select ‘Left or Right Endpoint’s Color’ . We set the color midpoint to white(#ffffff) this will create a gradient effect in menu bar.
f. In your 1×50 px canvas you can already use this gradient then paste it to your menu bar then duplicate it as many as you want… and then you have it!!!! Note: the image above is for demo only and not the actual 1×50 pixel of image.
In my previous blog post I discussed about how to slice a template, now we will import your sliced image to html as a webpage. If you’re thinking to a <img src=""> html tag, it’s a big NO, we will be use the CSS but we have to create your html first.
* After the html file, create a css file and name it as style.css, I recommend you to put this file where your html file is located also.
* After style.css was created, we will link your style sheet from html file. Insert this line
inside of
Then open your style.css, now we will set the padding and margin of body to zero because some browser has default margins and padding. We put text-align:center because IE6 doesn’t read margin: 0 auto that makes <div> to align center. Then its up to for adding more attribute or properties of body like Fonts-size, font-style, color etc. For the following instruction just follow the html and css as describe below.
body {
margin: 0;
padding: 0;
text-align: center;
}
Then the container, this will serve as a second body of our html, as I mention margin: 0 auto will set the div to center, and we need to add a text-align: left to override the text-align: left to the body, because we want to set all element inside the #container to align left.
Choosing the right layout
Many web template you can choose but in this tutorial i would prefer the usual and common web layout and this must have a header, navigation area, content area and a footer that you’ll find with all web layouts. With CSS design, you have to remember that you can be as creative as you want as long as you think about how the design will be implemented as a webpage as you go along in your design.
Below is a screenshot of the layout that we will be using. To comply with the standard in web layout As you can see, it consist of a header, content, and a footer.
1. Surveying Your Layout
2. Slicing the area
Since Gimp has no slicing tool by default we will use the alternative tool the CROP TOOL or shift+c for shorcut. Now we will slice the image area by area just follow the image below.
* press the Crop Tool then drag it to the guide portion and it will automatically snap to the ruler then press enter or just click it.
* Just apply this procedure to the remaining images below.
* After you crop the photo save it as logo.jpg
*save as banner.jpg
* save as content-bg.jpg
* Since the content-bg.jpg has the same texture form top to bottom we have to repeat this image as I mentioned earlier for the efficiency of the layout.
* For more efficiency I recommend you to cut this image up to 1px of height. I cut this image approximately more or less 25px for tutorial purposes.
* save as footer.jpg
* Since the bottom part of the main content is not the same with the texture content-bg.jpg we have to slice it separately.
* save as menu-left.jpg
* save as menu-middle.jpg
* Same as content-bg.jpg we also have to repeat this.
* save as menu-right.jpg
- now were all done! for importing this sliced images to html please read my next blog post. Click here
This is a tip for the newbie on wordpress theming. If you install free themes and your having a hard time controlling your image alignment to left, right or center. This is because your using an older theme, you may not have these styles in your style sheet.
Here are the styles – you can just copy and paste them into your style.css file or wherever your CSS styles are located:
