Tag Archive for Design

Ycademy Online Seminar April 2011

by  • April 20, 2011

WordPress for Beginners and Pros Our April 2011 Seminar will feature some important Updates as well as new ideas relating to WordPress and WordPress Design and Development. This Seminar is for WordPress Users, Designers and Developers as well. 1. WordPress Today WordPress Powers 10 % of the Web! Its continuous development and the very active community have made of WP a leader and trendsetter in Website development and design. We will provide you with the latest news and trends as they emerged on yesterday’s World Camp which took place in Seattle (April 16, 2011). 2. Semiomantics Today We will show how Semiomantics fits in to the competitive world of and around WordPress and how we can take advantage of global WordPress development to shape our business and to build an ever growing customer base. We will release the New Semiomantics Website, Forum and Affiliate Program. An update of Semiomantics XO will be released as well right at the Seminar. 3. Basics and the Process of Developing a Website We will look into the Process and Work-flow of developing and implementing an online project and compare our own activity to some standards and benchmarks. This is an important chapter as it [...]

… Read more →

How to create a Favicon with Photoshop

by  • March 9, 2011

Create .ICO Files (Favicons) with Photoshop The favicon or icon is part of the customization of a website. The favicons show namely in the browser tabs. Nowadays most browsers will also show .gif and .png icons; the .ico format is preferred by Internet Explorer. A quick and easy way to create a Favicon is by using the online tool put at disposal by favicon.com. A better result can be achieved by editing the favicon in Photoshop; however Photoshop does not support the .ICO format in its native version. A plug-in can remedy. Download and install the Plug-in To start with, download the free Plug-in from Telegraphics. Paste the plug-in file (ICOFormat.8bi, or ICOFormat64.8bi for the 64 bit version) in your Photoshop: …Program Files/Adobe/Photoshop/Plug-ins/File Formats. re-start Photoshop. Parameters you must respect The .ico file format will only be available in Photoshop if you respect the following: Maximum file size 256 x 256 pixels RGB, Bitmap, gray-scale or Indexed mode Maximum 8 bits per channel To save an image as .ico, use “save as” and select from the drop-down the ICO format. How to Create an Icon or Favicon in Photoshop Favicons are small icons, very small icons, since they measure only [...]

… Read more →

Apple Touch Icon Tutorial

by  • February 2, 2011

How to create an Apple Touch Icon – Tutorial Subsequent to yesterday’s call and post, this article shows how to design an Apple Touch Icon following Apple Developers Guidelines. For the purpose of this tutorial we are focusing on Icons for iPhone, iPod and iPad; also we limit the exercise to icons for websites and neglect applications; Apple refers to these icons as Web Clip Icons (recommended for websites and web applications). 1. Apple Touch Icon Guidelines The icons must meet specific criteria for display in iOS (that’s the apple Operating System for mobile devices). Here are the rules: Size iPhone and iPod:  57 x57 pixels and 114 x 114 pixels for high resolution iPad: 72 x 72 pixels Style iOS adds automatically some style elements to your icon, namely: Rounded Corners Drop Shadow Reflective shine You can prevent iOS from adding styles by naming your icon apple-touch-icon-precomposed.png You then have to respect some additional criteria to ensure that your icon is eligible to the visual enhancements iOS will provide: Produce an image in PNG Rounded Corners at 90 Degrees No shine or gloss Example: Our 57 x 57 pixels design: Apple’s iOS output: Format Apple recommends for all icons [...]

… Read more →

Simple Sprites Menu

by  • January 29, 2011

How to build a fading Navigation with Sprites To build a navigation bar using sprites we need an image (menu design), some CSS code to style the menu area and some HTML code to link the menu to target. Finally we drive the feature with a jQuery. 1. Design the Menu For best design use Photoshop. Create a new transparent image with the width of your navigation bar and double the height of the visible menu. In my case, the bar is 1024 pixels wide and 68 pixles high, my new image is thus 1024×137 (I add 1 pixel to the hight which I leave unused). Design your Tabs and ad text on the normal view. Do the same on the Hover view. Save your file. 2.  Create your CSS Style Sheet I start by resetting CSS (import reset style sheet) and then add some general page styles before styling the fading navigation: [php] @charset “utf-8″; /* Imports */ @import url(“resets.css”); /* General Page Style */ body { background: #ffffff; } #page-wrap { margin: 0 auto; width:1024px; } h2 { color: #fff; font: 30px Arial, Helvetica, sans-serif; margin: 20px 0 40px 0; } /* Basic Elements */ #content { width: [...]

… Read more →