Como Usar Un Ui Kit Para Web

7/25/2019 Como Usar Un Ui Kit Para Web

1/45


2/45


3/45

Ahora es el mom ento para iniciar la creacin :

PASO 1 Cree el documento A b r i r P h o t o s h o p y v a y a a l m e n A r c h i v o >

N u e v o , d e f i n i r l a a n c h u r a y l a a l t u r a : . 1 0 0 0 1 8 0 0 p x e l e s

. P u l s e e l b o t n O K p a r a a b r i r e l n u e v o d o c u m e n t o


4/45

C r e a r u n n u e v o g r u p o ( m e n C a p a > N u e v a > G r u p o ) y e l n o m b r e d e T o p . U t i l i c e a h o r a l a

h e r r a m i e n t a r e c t n g u l o r e d o n d e a d o ( r a d i o 3 p x ) p a r a c r e a r u n r e c t n g u l o d e f i n i d o c o n

v a l o r e s d e 9 0 0 x 6 0 p x e l e s . U t i l i c e e l d e l # 6 6 b 5 e d a z u l p a r a l l e n a r e l r e c t n g u l o . A p l i c a r

a h o r a t r e s e s t i l o s d e c a p a : u n a s o m b r a i n t e r n a , u n a s u p e r p o s i c i n d e d e g r a d a d o y u n

e s b o z o . A c t i v a r e l e s t i l o d e c a p a , s e l e c c i o n e l a c a p a y v a y a a l m e n E d i t a r > E s t i l o d e c a p a >

S o m b r a i n t e r i o r . L o s e s t i l o s u t i l i z a d o s e s t n d i s p o n i b l e s e n e l a r c h i v o P S D u n i d o a l k i t B a l i o .


5/45

PASO 2 logotipo y creacin de mens P a r a c r e a r e l l o g o ,

p r i m e r o u t i l i c e l a h e r r a m i e n t a d e t i p o h o r i z o n t a l ( T ) p a r a a g r e g a r e l n o m b r e d e l b l o g y e l

l e m a ( e n m i e j e m p l o h e u t i l i z a d o l o s t i p o s d e l e t r a H e l v t i c a y A n g e l i n a ) . A p l i c a r a h o r a l o s

e s t i l o s d e c a p a e n e l n o m b r e d e l b l o g : s o m b r a , s o m b r a i n t e r n a y g r a d i e n t e d e s u p e r p o s i c i n

( s i g a l a s i g u i e n t e c o n f i g u r a c i n ) P a r a c r e a r l a f l e c h a , s o l a m e n t e h e u s a d o f c i l e l c e p i l l o d u r o

( 1 p x e l ) , y d i b u j m i f l e c h a c o n l a m a n o e n l a n u e v a c a p a . P a r a c r e a r l o s b o t o n e s ,

d e s c a r g a r e l k i t d e B a l i o k i i n t e r f a z d e u s u a r i o y a b r a e l a r c h i v o p S D c o n r e s p e c t o a l o s

m e n s , a c o n t i n u a c i n , d e s l i c e y s u e l t e l o s b o t o n e s .


6/45


7/45


8/45

PASO 3 Crear el carrusel C r e a r p r i m e r o u n n u e v o g r u p o y e l n o m b r e d e

c a r r u s e l . U t i l i c e a h o r a l a h e r r a m i e n t a R e c t n g u l o r e d o n d e a d o ( U ) p a r a c r e a r u n r e c t n g u l o

9 0 0 x 3 2 5 p x .


9/45

O s a n i m o a n a v e g a r e n l a w e b p a r a e n c o n t r a r u n a i m a g e n p a r a l l e n a r e l c a r r u s e l . E n m i

c a s o , h e s e l e c c i o n a d o u n m u y b u e n e j e m p l o d e l a I s l a d e l o s M o n o s .


10/45

C r e a a h o r a d o s g u a s , 2 0 p i x e l s a l t u r a , e n l a p a r t e i n f e r i o r d e l c a r r u s e l . A c o n t i n u a c i n , c r e e

u n n u e v o g r u p o y e l n o m b r e d e l a n u m e r a c i n d e p g i n a s . C r e a r u n r e c t n g u l o r e d o n d e a d o

d e f i n i d o c o n l o s v a l o r e s 8 0 0 x 4 0 p x ( u t i l i z a d o l a h e r r a m i e n t a r e c t n g u l o r e d o n d e a d o ( U ) ) .

P a r a f i n a l i z a r , u t i l i c e l o s e s t i l o s d e f i n i d o s e n l o s b o t o n e s g r i s e s d e l k i t B a l i o .


11/45

E n c u a n t o a l a n u m e r a c i n d e p g i n a s , e l m i s m o m t o d o q u e u t i l i z a e l a r c h i v o P S D e n e l k i t

d e B a l i o n u m e r a c i o n e s d e p g i n a s .


12/45

P a r a f i n a l i z a r , c r e e d o s f l e c h a s p a r a e l r e c t n g u l o ( u n o e n e l l a d o i z q u i e r d o , o t r a e n e l l a d o

d e r e c h o ) . E s t a s f l e c h a s e s t n d i s p o n i b l e s e n e l k i t d e B a l i o t a m b i n .


13/45

V a s e a c o n t i n u a c i n e l r e s u l t a d o f i n a l c a r r u s e l :


14/45

PASO 4 Crear las cajas P a r a l a c r e a c i n d e l o s b l o q u e s d e l o s q u e t r e s

l t i m a s n o t i c i a s , c r e a r p r i m e r o u n n u e v o c u a d r o d e g r u p o y e l n o m b r e q u e , a c o n t i n u a c i n ,

c r e a r u n s e g u n d o c u a d r o d e g r u p o y e l n o m b r e d e b o x 1 . C r e a r a h o r a u n r e c t n g u l o

r e d o n d e a d o d e f i n i d o c o m o 2 8 0 x 2 2 0 p x e l e s c o n e l c o l o r # f 5 f 5 f 5 . E n u n e s q u e m a p a r a e l

r e c t n g u l o . A a d i r a h o r a u n a i m a g e n i l u s t r a d a , c o n u n t a m a o d e 2 6 6 x 1 3 3 p i x e l s . U t i l i c e l a

h e r r a m i e n t a d e t e x t o ( T ) p a r a a a d i r u n t t u l o y u n a p e q u e a d e s c r i p c i n d e l a n o t i c i a . Y

p o n e r u n b o t n L e e r m s e n l a c e n t r o d e l r e c t n g u l o . E s t e b o t n e s t d i s p o n i b l e e n e l k i t

d e B a l i o ( P S D a r c h i v o d e d e s c a r g a - c e n t r o ) . P a r a f i n a l i z a r , d u p l i c a r d o s v e c e s e l e l e m e n t o d e

c a j a 1 y u t i l i z a r l a h e r r a m i e n t a M o v e r ( V ) p a r a c o l o c a r l a n o t i c i a e n s u a n c h o d e l a

disposicin.


15/45


16/45


17/45


18/45


19/45


20/45

PASO 5 oferta premium P a r a c a u t i v a r a l o s v i s i t a n t e s p a r a i r a l a z o n a

p r e m i u m d e l a p g i n a w e b , h e c r e a d o u n a b a n d a a z u l . P a r a c r e a r e s t a b a n d a , c r e a r u n

n u e v o g r u p o y e l n o m b r e d e l a p r i m a . C r e a r a h o r a u n r e c t n g u l o c o n l a a l t u r a 6 0 p i x e l s , a l o

l a r g o d e l a a n c h u r a d e l a i m a g e n ( l o s e s t i l o s d e l a b a n d a e s t n d i s p o n i b l e s e n e l a r c h i v o

M e n u . p s d d e l k i t b a l i o ) .


21/45

U t i l i c e l a h e r r a m i e n t a d e t e x t o ( T ) p a r a a a d i r e l l e m a , a c o n t i n u a c i n , a a d i r e l b o t n g r i s a

l a d e r e c h a . T e x t o s y e s t i l o s b o t n e s t n d i s p o n i b l e s e n e l k i t d e B a l i o ( b o t n y P S D a r c h i v o

d e m e n ) .


22/45

G r u p o d e l a b a n d a , t e x t o y c a p a s d e b o t o n e s e n e l g r u p o d e a l t a c a l i d a d . S e l e c c i o n e e s t e

g r u p o e i r a C a p a M e n > m s c a r a d e c a p a > D e s c u b r i r t o d a s . S e l e c c i o n e l a h e r r a m i e n t a d e

d e g r a d a d o ( G ) , a c o n t i n u a c i n , e n e l s e l e c t o r d e d e g r a d a d o , s e l e c c i o n e e l s e g u n d o p r i m e r

p l a n o a t r a n s p a r e n t e ( c o n e l c o l o r n e g r o e n p r i m e r p l a n o ) . U t i l i c e e s t e g r a d i e n t e d e l a

i z q u i e r d a ( d e s d e l a i z q u i e r d a a l c e n t r o ) y l u e g o a l a d e r e c h a ( d e s d e l a d e r e c h a h a c i a e lc e n t r o ) .


23/45

PASO 6 Crear la necesidad de aplicaciones U n m e n d e l a

d e r e c h a r e c a p i t u l a l a s a p l i c a c i o n e s m s p o p u l a r e s d e l a p g i n a w e b , p a r a c r e a r e s t a b a r r a

l a t e r a l , p r i m e r o c r e a r u n n u e v o g r u p o y e l n o m b r e d e l a b a r r a l a t e r a l . U t i l i c e l a h e r r a m i e n t a

R e c t n g u l o r e d o n d e a d o ( U ) p a r a c r e a r u n r e c t n g u l o d e f i n i d o c o m o 2 8 0 x 4 8 0 p x e l e s y q u e

u t i l i c e l o s m i s m o s e s t i l o s c o m o l o s e s t i l o s u t i l i z a d o s p a r a l a p r e n s a .


24/45


25/45


26/45

U t i l i c e l a h e r r a m i e n t a d e t i p o h o r i z o n t a l ( T ) p a r a a a d i r e l t t u l o y e l n o m b r e d e l a u t o r .


27/45

Aadir ahor a un botn de descarg a azul a la dere cha (utilice el botn ms Lee de la noticia).


28/45

e n c u a n t o a l a s b a r r a s d e p r o g r e s o , u t i l i c e e l c e n t r o d e d e s c a r g a d e a r c h i v o s p S D o

e n c u e s t a d e l k i t B a l i o .


29/45

P a r a c r e a r e l a l i g u a l v n c u l o , v a y a a l s i t i o w e b I c o n F i n d e r y c u i d a r d e p a l a b r a c o m o p o r . )

Aadir ahor a en el icono y en el texto, un grad iente de super posicin # 6d6d 6d


30/45

P o n g a t o d a s l a s c a p a s r e l a t i v a s a l a s p r i m e r a s a p l i c a c i o n e s e n u n g r u p o ( n o m b r e q u e

a p p 1 ) , a c o n t i n u a c i n , d u p l i c a r l o s g r u p o s 4 v e c e s y e l u s o d e l a h e r r a m i e n t a m o v e r ( V ) p a r a

a p l i c a r t o d a s l a s a p l i c a c i o n e s e n u n a n i c a c o l u m n a .


31/45

PASO 7 Una aplicacin en la parte superior A la

i z q u i e r d a d e l a b a r r a l a t e r a l , u n a a p l i c a c i n s e p o n e d e r e l i e v e . P a r a c r e a r e s t a s e c c i n ,

c r e a r u n n u e v o g r u p o q u e n o m b r a l a p a r t e s u p e r i o r a p l i c a c i n . A a d i r a h o r a e l l o g o t i p o d e

u n a n u e v a a p l i c a c i n ( i r p u e d e v o l v e r a l a t i e n d a d e a p l i c a c i o n e s ) .


32/45

V o l v e r a l a r c h i v o c o n r e s p e c t o a l o s m e n s d e l k i t B a l i o e i n s e r t a r e l m e n 9 .


33/45

P a r a c r e a r l a g a l e r a , c o p i a r y p e g a r u n a d e l a s i l u s t r a c i o n e s d e l a i m a g e n d e l a A p p .


34/45

a c o n t i n u a c i n , o t r o s d o s m s e n a m b o s l a d o s d e l a p r i m e r a i m a g e n . R e d u c i r l a o p a c i d a d d e

e s t a s d o s n u e v a s i m g e n e s . H a c e r i g u a l p a r a d o s n u e v a s i m g e n e s . L o s r e s u l t a d o s d e l o s

e f e c t o s d e l a p e r s p e c t i v a d e r e d u c i r e l t a m a o d e c a d a i m a g e n ( p a r a r e d u c i r e l t a m a o d e

i m a g e n , p u l s e l a s t e c l a s C t r l + T / C m d p a r a a c t i v a r l a t r a n s f o r m a c i n l i b r e ) .


35/45

PASO 8 Crear el pie de pgina P a r a c r e a r e l p i e d e p g i n a , e m p e z a r a

c r e a r u n n u e v o g r u p o y e l n o m b r e d e p i e d e p g i n a . I r a l a r c h i v o P S D d e l o s m e n s d e l k i t

d e B a l i o y e l t o b o g n y s o l t a r l o s e l e m e n t o s p a r a c r e a r u n b o r d e a z u l y u n a b a n d a g r i s .


36/45

U t i l i c e a h o r a l a h e r r a m i e n t a d e t i p o h o r i z o n t a l ( T ) p a r a s i m u l a r l o s t t u l o s y l o s e n l a c e s . P a r a

l o s i c o n o s , p u e d e f i b n d a l g u n o s d e e l l o s e n n u e s t r a p g i n a w e b i c o n f i n d e r . c o m f a v o r i t o ( l o s

e s t i l o s e s t n d i s p o n i b l e s e n e l m e n a r c h i v o P S D d e l k i t B a l i o ) .


37/45

E n c u a n t o a l a f o r m a d e b o l e t n s i t u a d o a l a d e r e c h a , u t i l i z a r e s t e t i e m p o e l a r c h i v o B a l i o - U I -

K i t - l o g i n - f o r m . p s d p a r a e n c o n t r a r l a e n t r a d a y e l b o t n .


38/45

p a r a t e r m i n a r , c r e a r u n a n u e v a c a p a y c o l o c a r l a d e b a j o d e l a s c a p a s d e t e x t o s . C r e a r c o n l a

h e r r a m i e n t a M a r c o R e c t a n g u l a r ( M ) u n a s e l e c c i n c o n u n t a m a o d e 9 0 0 x 2 5 0 p x . U t i l i c e l a

h e r r a m i e n t a C u b o d e p i n t u r a ( G ) p a r a l l e n a r l a s e l e c c i n c o n e l g r i s : # e d f 2 f 6 .


39/45

PASO 9 Terminar con el Derecho de Autor P a r a t e r m i n a r

l a p l a n t i l l a , c r e e u n l t i m o g r u p o y e l n o m b r e d e l D e r e c h o d e A u t o r . C r e a r u n a n u e v a c a p a y

c r e a r b a j o e l p i e d e p g i n a , u n a s e l e c c i n c o n u n t a m a o d e 9 0 0 x 5 p x . U t i l i c e a h o r a l a

h e r r a m i e n t a C u b o d e p i n t u r a ( G ) p a r a f i l e n c e n d i c o n e l g r i s : # 6 7 7 3 7 c . U t i l i c e l a

h e r r a m i e n t a d e t i p o h o r i z o n t a l ( T ) p a r a a a d i r e l D e r e c h o d e A u t o r .


40/45

U t i l i c e e l a r c h i v o B a l i o - U I - K i t - c i n t a - s o c i a l . p s d a a d i r t r e s i c o n o s d e l a d e r e c h a p a r a T w i t t e r ,

RSS y Facebook.


41/45

L a p l a n t i l l a h a f i n a l i z a d o .


42/45

C o n e s t e t u t o r i a l , s e p u e d e v e r q u e p o d e m o s r e a l m e n t e s e n c i l l o c r e a r u n d i s e o u t i l i z a n d o

e l k i t d e B a l i o . E s t e m t o d o s e p u e d e a p l i c a r a t o d o s l o s R e c u r s o s q u e p r o p o r c i o n a m o s e n

G r a f p e d i a . P o r q u p e r d e r e l t i e m p o , c u a n d o s e p u e d e f c i l m e n t e u t i l i z a d a a r c h i v o P S D

l i s t o p a r a u s a r ?


43/45

K i t B a l i o : E l k i t e s t d i s p o n i b l e a t r a v s d e l a p g i n a w e b d e n u e s t r a a s o c i a c i nw e b d e s i g n e r d e p o t , p a r a d e s c a r g a r e l k i t d e B a l i o , h a g a c l i c a q u

( h t t p : / / w w w . w e b d e s i g n e r d e p o t . c o m / 2 0 1 2 / 0 1 / f r e e - d o w n l o a d - b a l i o - w e b - u i - k i t / ) . G r a c i a s a

t o d o s l a l e c t u r a d e e s t e n u e v o t u t o r i a l d e P h o t o s h o p e n G r a f p e d i a . S i t e g u s t a , p u e d e s

a y u d a r n o s s i p r o m u e v e e s t e t u t o r i a l e n s u s r e d e s s o c i a l e s T w i t t e r

( h t t p s : / / t w i t t e r . c o m / i n t e n t / t w e e t ?

o r i g i n a l _ r e f e r e r = h t t p % 3 A %2 F % 2 F w w w .g r a f p e d i a . c o m % 2 F t u t o r i a l s %2 F d e s i g n - p e o p l e - s t a r s -

w e b - l a y o u t & s o u r c e = t w e e t b u t t o n & t e x t = N e w P h o t o s h o p T u t o r i a l : H o w t o u s e t h e B a l i o U I K i t

T o D e s i g n A P e r f e c t i P h o n e A p p W e b L a y o u t h t t p : / / w w w . g r a f p e d i a . c o m / t u t o r i a l s / b a l i o - u i - k i t -

d e s i g n - p e r f e c t - i p h o n e - a p p - w e b - l a y o u t ) , F a c e b o o k

( h t t p : / / w w w . f a c e b o o k . c o m / s h a r e r / s h a r e r . p h p ?

s r c = b m & u = h t t p : / / w w w . g r a f p e d i a . c o m / t u t o r i a l s / b a l i o - u i - k i t - d e s i g n - p e r f e c t - i p h o n e - a p p - w e b -

l a y o u t ) y / o t p e s e ( h t t p : / / w w w . s t u m b l e u p o n . c o m / b a d g e / ?

u r l = h t t p : / / w w w . g r a f p e d i a . c o m / t u t o r i a l s / b a l i o - u i - k i t - d e s i g n - p e r f e c t - i p h o n e - a p p - w e b - l a y o u t ) .
http://www.stumbleupon.com/badge/?url=http://www.grafpedia.com/tutorials/balio-ui-kit-design-perfect-iphone-app-web-layouthttp://www.facebook.com/sharer/sharer.php?src=bm&u=http://www.grafpedia.com/tutorials/balio-ui-kit-design-perfect-iphone-app-web-layouthttps://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fwww.grafpedia.com%2Ftutorials%2Fdesign-people-stars-web-layout&source=tweetbutton&text=New%20Photoshop%20Tutorial:%20How%20to%20use%20the%20Balio%20UI%20Kit%20To%20Design%20A%20Perfect%20iPhone%20App%20Web%20Layout%20http://www.grafpedia.com/tutorials/balio-ui-kit-design-perfect-iphone-app-web-layouthttp://www.webdesignerdepot.com/2012/01/free-download-balio-web-ui-kit/


44/45

4559 Usuarios 68 503 Los productos de la coleccin

Agrade cemos a los lectore s mucho haciend o este esfuer zo. )

E tiquetas: a p l i c a c i n ( h t tp : // g r a fp e d i a . c o m / ta g / a p p ) b a l i o ( h t tp : // g r a fp e d i a . c o m /t a g / b a l i o )

i p h o n e ( h t tp : // g r a fp e d i a . c o m / ta g / i p h o n e ) e q u i p o ( h t tp : // g r a fp e d i a . c o m / ta g / k i t)

d i s e o ( h t tp : // g r a fp e d i a . c o m / ta g / l a y o u t ) s i t i o w e b ( h t tp : // g r a fp e d i a . c o m /t a g / w e b s i te )

nete grafpedia en

un Twitter (https://twitter.com/grafpedia_fr)

b Facebook (https ://ww w.fac ebook.c om/pages/Gr afpediafr/207641172640736)

c Google+ (https ://plus.google.c om/115841503811254325274/posts )

Hoja informativa

Suscrbete para recibir noticias y regalos en su buzn de correo (mximo un correoelectrnico a la semana).

Y o u r e m a i l r e q u i r e d

Suscribir

Apoyo e Informacin

Acerca de (http://www.grafpedia.com/about)

PF (http://www.grafpedia.com/faq)

Trminos de Uso (http://www.grafpedia.com/terms-of-use)

poltica de privacidad (http://www.grafpedia.com/privacy-policy)

Contacto (http://www.grafpedia.com/contact)

tutoriales

Para ayudar a que proporcionamos tutoriales de Photoshop

(http://grafpedia.com/category/tutorials) para aprender cmo utilizar nuestros recursos.
http://grafpedia.com/category/tutorialshttp://www.grafpedia.com/contacthttp://www.grafpedia.com/privacy-policyhttp://www.grafpedia.com/terms-of-usehttp://www.grafpedia.com/faqhttp://www.grafpedia.com/abouthttps://plus.google.com/115841503811254325274/postshttps://www.facebook.com/pages/Grafpediafr/207641172640736https://twitter.com/grafpedia_frhttp://grafpedia.com/tag/websitehttp://grafpedia.com/tag/layouthttp://grafpedia.com/tag/kithttp://grafpedia.com/tag/iphonehttp://grafpedia.com/tag/baliohttp://grafpedia.com/tag/app

Como Usar Un Ui Kit Para Web

Documents

Transcript of Como Usar Un Ui Kit Para Web