CREATE A NEW PATTERN

Friday, April 4th, 2014 Whats Trending

Step 1 : Create a new document

Create a document with preferred size. Set the background to transparent.
1
Step 2 : Add guides

To find the center of our document add guids. For this go view -> New guide -> set 50%  for vertical and horizontal orientation to get center position.

If we have trouble to see guide lines we can change that through

Edit -> Preferences -> Guides,Grid & Slides

Now change the color
2
Step 3 : Draw a shape

From the rectangle marquee tool choose elliptical tool and draw a shape with holding shift key.

Then fill the shape with black

Duplicate the shape layer.
3
Step 4 : Apply the offset filter

The corner will be filled by shape through applying offset filter.

Set the Horizontal option to 50% and vertical option to 50%.

Now we have to define pattern. For set this go

Edit -> Define pattern and set pattern name.
4
Step 5 : Create a new document

Again create a new document to use pattern
5
Set the background as white.

Create a new layer and fill the layer with pattern.
6
The layer is filled with pattern will be like this.
7

Download Icon

Monday, March 10th, 2014 Whats Trending

Step 1 : Create an Document
Create a new document with preferred size.
Fill the background with #f0eae1

1

Step 2 : Draw a circle
Use shape tool to draw circle.
Ctrl+Click on the circle and add some anchor points to make some shape changes.

2

Add the following layer styles to that shape

Gradient overlay
Inner shadow
Stroke

Next draw a little lip at the bottom of the main shape

3

Give the following layer styles to this lip shape
Drop shadow
Inner shadow
Color overlay

4

Now the shape will be like this

5

Step 3 : Inner circle
Draw a small circle inside the main shape and apply following layer styles.
Drop Shadow
Inner shadow
Inner glow
Gradient overlay

6

Step 4 :Overloading shape
Now it’s time to draw loading shape for this once again draw a circle behind small circle.
Apply the following layer styles to overloading shape
Drop Shadow
Inner shadow
Inner glow
Color overlay
Stroke

7

Create a new layer ctrl+click the orange shape layer.
Set the blending mode to soft light, opacity to 70%.
Grap brush tool and play on orange shape laye
Once again create new layer, ctrl+click on orange layer and hit delete

8

Now apply the following layer style
Drop shadow
Inner shadow
Gradient overlay

9

Step 5 : Add text
Now type the number 85% and 530kb to denote the loading.
Afetr making some changes finally the icon will be like this.

10

Golwing 3D Text Effect

Monday, March 3rd, 2014 Whats Trending

Step 1 : Document creation

Create a new document with 600px width and 400px height.
1

Step 2 : Add background color

Set as #011923 as background color.

2

Add some noise. Go to filter->Noise->Add noise->select 2% and click ok.
3

Step 3 : Create new layer

Select Eliptical marquee tool and set feather as 150.
4

Fill selected area with white color.

Now set blending mode to Linear Dodge(add) and bring opacity to 90%.

5

6
Step 4 : Type the text

Type the text “CONTEMPO” set its size to above 160, fill the text with while color, use Helvetica neue font style and set to bold text.
8
7
Step 5 : Create darker text
Set darker color to duplicate layer and set the darker text behind the original text layer.
Make some adjustment by transform the text.
9
Step 6 : Apply Layer style
Applying the following layer style to white text layer
10
11
12
Now the text will be shown like this
13
Apply layer style to darker text
14

15

16

17
Now the text will be shown like this
18
Step 7 : Duplicate the text layer
Set blending mode to soft light and fill it as90%.
19
Select marquee tool and set feather to 0px.

Erase the selected area and the text will be like this
21

22
Step 8 : Create glowing effect
To create glowing effect select brush tool and create some spot.
23
Create x shaped sparkle by using free transform option.
24
Step 9 : Glowing 3d text
Finally we got the glowing 3d effect text.

25

Why We Use Bootstrap Instead Foundation

Saturday, March 1st, 2014 Whats Trending

The Bootstrap framework is the latest innovation to hit the design and development arena, making the creation of websites and apps easier, faster and better in general. If you’re not using Twitter Bootstrap yet, it’s time you took a look. Bootstrap is like a candy store for developers full of a multitude of tools.

Save Time:
he Bootstrap libraries offer readymade pieces of code that can pump life into a website. A web developer doesn’t have to spend time laboriously working out and writing code, but simply find the right piece and fit it into the structure they’re working on. In addition to this, a lot of the styling and design aspects are already taken care of, since the CSS is built with LESS.

Customizble:
A great aspect of Bootstrap is that you can make it your own. You can sit down and rummage through the whole framework and keep what you need and ditch what you don’t. This is the main reason many developers feel some tools are completely useless on the Bootstrap while others revere the same.

Factor in the Design:

The Grid Speaks:Creating page layouts requires a decent grid. Using the platform’s grid isn’t mandatory, but it does make your job a whole lot easier. On default mode the platform provides a 16 column grid which is 940px wide.
LESS is more:LESS has in reality gone ballistic within development circles. With its additions to the Bootstrap platform, you can use LESS mixins and CSS manipulations to customize the built-in grid.
JavaScript:Bootstrap comes equipped with JavaScript libraries that go above and beyond basic structural and styling. JavaScript often becomes an integral part of a web design and developers have to pull in all elements together to see the final form flourish.

Consistency:
Bootstrap’s results are uniform across platforms. You’ll see the same thing on Internet Explorer, Chrome and Firefox.

Updates:
Take JQuery UI as an example here: updates get to users twice a year.

Integration:
If you’re working on a site which is already live, but still trying to iron out the creases then Bootstrap can help. For instance, if you use table styling, all you need to do is take the styles you need and copy them to the CSS file you’re working with. Bootstrap will immediately kick in with its own style and all you need to do from there is link up the file you are working with or hotlink to Twitter (more or less). Integration is simple, fast and easy to accomplish and once you’re done you can play with your design to your heart’s content.

Responsiveness:

Bootstrap is responsive. If you shift from a laptop to an iPad and from an iPad to a Mac you won’t have to fret over your work. Bootstrap adapts to the change in platforms with super speed and efficiency.

Future Compatibility:

Bootstrap comes equipped with many elements that are being considered the future of design itself. For instance both HTML5 and CSS3 are things that are going to be big in the future.

Stylish Text Effect

Tuesday, February 18th, 2014 HTML, Photoshop, Whats Trending

Step 1 : Open a new Photoshop document
In the first step,  open a new document with preferred size.
We can use the keyboard shortcut ctrl+N to open a new document.

p1

 

 

Step 2 : Fill the document with Balck
Set the foreground color as Black. Use the keyboard shortcut Alt+Backspace to fill the document with foreground color.

p2

Step 3 : Add your text to the Document
Grab the type tool from the tools palette otherwise press T to work with keyboard shortcut.
p3

Go to the option bar set font color, font size and font style.
Press letter X to swap foreground and background color so that we get white as a foreground color.

p4
Type the text plastic and resizing the text size  by pressing ctrl+T.

p5

Step 4 : Choose a color for your text using the color overlay layer style
To create plastic effect first we have to choose color overlay from layer styles which is in bottom of layer palette.

p6

  p7  

It brings up a color overlay dialog box. Click on color swatch and pick a lighter shade of the color.
p8
p9

Now the text color will appear like this

p10

 

Step 5: Add An Inner Shadow To The Text Using The “Inner Glow” Layer Style
Now we are going to give a three dimensional look for our text by choosing Inner glow style.

p11

Change the blend mode to multiply and change an opacity also to 50%.
Click on color swatch and pick a matching color, source will be an edge and the shadow size will be 13 pixels.

p12

Now the text will look something like this

p13

Step 6: Apply The “Bevel and Emboss” Layer Style
We have to add Bevel and Emboss effect to our text. For doing this we want to load new contours and append that.

p14

To load new contours click on the down pointing arrow to the right side of the contour preview thumbnail.

p15

p16

p17
p18

Select Large list from the options so that we can see both thumbnail preview and name of the contour .

p19

Select the Ring-Triple and change the rest of Bevel and Emboss options.

p20

p21

Now the text looks like this

p22

Step 7: Apply The “Contour” Layer Style
Add the contour layer style from the layer style palette.

p23

p24

Change the contour style and range to create plastic effect on our text

p25

p26

After adding contour style the text will appear like this

p27

Step 8: Duplicate The Text Layer
Duplicate the text layer so now there are two text layers in the layers palette.

p28

Click on the original text layer, once again doing some changes in the original text.

p29

Step 9: Add a Stroke To The Text
Click on layer style to create stroke effect on the text.

p30

Change the Range and color

p31

Move the mouse over the text we will see our mouse cursor will change into eyedropper icon.
Then click near the edge of one letter to sample shade of the color.
Then choose color midway between lighter and darkest colors in the text.

p32

p33

 

Step 10: Apply The “Bevel and Emboss” Style To The Stroke
Once again wsitch to Bevel and Emboss style to stroke itself.

p34

Click on the down pointing arrow to change to stroke emboss.

p35

Then change contour style and range

p36

p37

Finally we get the text with plastic effect

p38

CHOOSING RIGHT SIZE IMAGE(responsive) IS THE BEST SOLUTION FOR RESPONSIVE TEMPLATE

Monday, February 17th, 2014 Whats Trending

 

 

If you code websites, it’s a good bet that at least one of your clients has asked about or requested a mobile-friendly website. If you go the responsive design route (whereby your website is flexible enough to adjust visually from mobile to desktop widths), then you’ll need a strategy to make images flexible, too — a responsive image solution.
The basics are fairly simple to learn, but once you’ve mastered them, you’ll find that scaling images is only the beginning — you might also have performance and art direction conundrums to solve. You’ll be faced with a wide field of responsive image solutions to choose from, each with its own strengths and weaknesses — and none of them is perfect! This article leads you through the basics, and then arms you with the information you’ll need to pick the best responsive image solution for your situation.

 

1

The above Fig Says,

Let’s say you’ve got a beautiful wide image on your home page. It shows a wide bucolic expanse of fields and forest, blue sky and fluffy clouds above, and a happy family having a picnic on the grass.

Now scale it down to 300 pixels wide, mobile-style. At this scale, our vacationing family looks more like the ants at the picnic!

 

1

The above Fig Says,

Herein lies what we call the “art direction” problem. Some images just don’t scale well; fine detail is lost, and dramatic impact is reduced. In the case of our hero image, it would be much nicer visually if the mobile version of the photo was zoomed in, cropped and focused on our happy family. To solve this problem, we need a responsive image solution that enables you either to specify different versions of the image for different situations or to adjust the image on the fly.

 

 

USE OF PATHFINDER TOOL IN ADOBE ILLUSTRATOR

Monday, February 3rd, 2014 Whats Trending

The pathfinder tool in Illustrator is one of most useful tools for manipulating paths. You can find the pathfinder tool by going to Window > Pathfinder.

Initially:

initial

Unite combines all selected shapes into one shape.

Before:

add-aAfter:

add-b
Minus Front of the selected shapes, takes the bottom-most shape (in your Layers) and subtracts all other selected shapes from itr.

Before:

sub-a

After:

sub-b

Intersect results in the intersection of the selected shapes.

Before:

intersect-a

After:

intersect-b

Exclude excludes the overlapping areas of the selected shapes

Before:

exclude-a

After:

exclude-b

Coming…, The six pathfinders are a little hard than the shape modes, but very useful.

Divide separates the selected shapes into parts, which take on the overlapping color.

In the image above, on the left are two separate triangles, one overlapping the other. On the right is the result after Divide is used. (All subsequent images follow a before on the left, after on the right format.)

Before:

 

divideAfter:

divide-b

Merge is very similar to Trim; it separates the selected shapes into parts while preserving top layers, but also merges overlapping shapes of the same color.

Before:

merge-a

After:

merge-b

Minus Back works with two shapes, and takes subtracts the bottom shape from the top shape.

Before:

minus-back-a

After:

minus-back-b

Outline results in the outline of each shape, split into parts; each part takes on the color of the top-most layer.

In the above image, the sections have been moved out of their original outlined positions for clarity.

Before:

 

outline-a

After:

outline-b

Crop takes the shape of the top layer that is selected and crops out everything from all the other selected layers that is not within that shape, in the color(s) of the other layer(s).  The above image shows three overlapping shapes and the results of using the crop tool if different shapes were the top layer. For example, on the left, the circle layer is the top layer, so the circle shape is preserved but what results is the parts of the layers underneath that are within the circle. It may be easier to think of the crop tool as a cookie cutter; you only want whatever is within the shape of the cookie cutter.

Before:

crop-aAfter:

crop-bTrim separates the selected shapes into parts, as Divide does, but preserves the top shape when there is overlap.

In the image above, on the left are the same two separate triangles as before. When Trim is used instead of Divide, the blue triangle, which overlaps the yellow one, is preserved.

Before:

trim-a

After:

trim-b

 

 

Role of MEDIA QUERY in CSS3 for Responsive

Monday, January 27th, 2014 Whats Trending

CSS media queries:

A media query consists of a media type and at least one expression that limits the style sheet’s scope by using media features, such as width, height, and color. Media queries added in CSS 3.

Syntax:

Media queries consist of a media type and can, as of the CSS3 specification, contain one or more expressions, expressed as media features, which resolve to either true or false.  The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true.

Media Types:

Some CSS properties are only designed for a certain media. For example the “voice-family” property is designed for aural user agents. Some other properties can be used for different media types. For example, the “font-size” property can be used for both screen and print media, but perhaps with different values.

Media Type:Description

all:Used for all media type devices.
aural:Used for speech and sound synthesizers.
braille:Used for braille tactile feedback devices.
embossed:Used for paged braille printers.
handheld:Used for small or handheld devices.
print:Used for printers.
projection:Used for projected presentations, like slides.
screen:Used for computer screens.
tty:Used for media using a fixed-pitch character grid, like teletypes and terminals.
tv:Used for television-type devices

Eg:
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
p.test {font-weight:bold;}
}

or
<link href=”styles.css” type=”text/css” media=”screen” rel=”stylesheet”/>
<link href=”styles.css” type=”text/css” media=”print” rel=”stylesheet”/>

How to speck an image within 2 Minutes.-Simple concept for beginners.

Saturday, January 25th, 2014 Photoshop

Select any image, from web. So, I’m taking the followed image as my original image.1aa

Convert your original image into tile style by making filter option. To make tile style follow the steps which is shown in the screenshot.

1a

Convert your original image into Poster style by making filter option.

1b

Convert your original image into paint technique by making filter option.

1c

Flexible Video On screen Via HTML Responsive

Tuesday, January 21st, 2014 Whats Trending

The HTML draft specification introduced the video element for the purpose of playing videos or movies,partially replacing the object element. HTML video is intended by its creators to become the new standard way to show video on the web without plugins.

 

Source Code

 

source

CSS

Here I consider the total width as 700px;

 

css1

So, Initially screen shot browser- Zoom 75%

zoom-75

Where as – Zoom 100%

 

zoom-100

 

Here the code for responsive, lets check it,

 

css2

 

and screen shot – zoom 150%

zoom-150

Here the video wrapper to 600px which is fixed for 800px initially,

 

css3

In browser – Zoom 400%

zoom-400

Finally both the fixed videos are at the same width(600px).

Quick Search

 

Calendar

April 2014
M T W T F S S
« Mar    
 123456
78910111213
14151617181920
21222324252627
282930