Pgina de inicio /

tutoriales de Photoshop

Aprende a usar la coleccin de primera calidad con los

tutoriales de photoshop

Viernes,13deenero2012

tutoriales(http://grafpedia.com/category/tutorials)

Cmo utilizar el Kit de Balio

interfaz de usuario para crear
un diseo web perfecto iPhone
App
EstenuevotutorialdePhotoshopledanlapruebadequeesposibleconstruirfcilmente
unanuevaplantillausandounkitdeinterfazdeusuariocomoelqueacabamospublicadaen
estapgina.Estekitincluyeelementosgrficoscomobotones,motoresdebsqueda,as
comomens.Conlaayudadeestekit,decidcrearunaplantilladedicadaaunblogde

WordPressconrespectoiPhonesAplicaciones.Avisomuyimportante:estekithasido
diseadoporGrafpediayentregadoenelsitiowebdenuestraasociacin
webdesignerdepot.Porfavor,accedaaesteenlace
(http://www.webdesignerdepot.com/2012/01/freedownloadbaliowebuikit/)paradescargar
elkit.Antesdecomenzarestetutorial,marqueaquelresultadofinal:

Ahoraeselmomentoparainiciarlacreacin:

PASO 1 Cree el documentoAbrirPhotoshopyvayaalmenArchivo>

Nuevo,definirlaanchuraylaaltura:.10001800pxeles

.PulseelbotnOKparaabrirelnuevodocumento

Crearunnuevogrupo(menCapa>Nueva>Grupo)yelnombredeTop.Utiliceahorala
herramientarectnguloredondeado(radio3px)paracrearunrectngulodefinidocon
valoresde900x60pxeles.Utiliceeldel#66b5edazulparallenarelrectngulo.Aplicar
ahoratresestilosdecapa:unasombrainterna,unasuperposicindedegradadoyun
esbozo.Activarelestilodecapa,seleccionelacapayvayaalmenEditar>Estilodecapa>
Sombrainterior.LosestilosutilizadosestndisponiblesenelarchivoPSDunidoalkitBalio.

PASO 2 logotipo y creacin de mensParacrearellogo,

primeroutilicelaherramientadetipohorizontal(T)paraagregarelnombredelblogyel
lema(enmiejemploheutilizadolostiposdeletraHelvticayAngelina).Aplicarahoralos
estilosdecapaenelnombredelblog:sombra,sombrainternaygradientedesuperposicin
(sigalasiguienteconfiguracin)Paracrearlaflecha,solamenteheusadofcilelcepilloduro
(1pxel),ydibujmiflechaconlamanoenlanuevacapa.Paracrearlosbotones,
descargarelkitdeBaliokiinterfazdeusuarioyabraelarchivopSDconrespectoalos
mens,acontinuacin,desliceysueltelosbotones.

PASO 3 Crear el carruselCrearprimerounnuevogrupoyelnombrede

carrusel.UtiliceahoralaherramientaRectnguloredondeado(U)paracrearunrectngulo
900x325px.

Osanimoanavegarenlawebparaencontrarunaimagenparallenarelcarrusel.Enmi
caso,heseleccionadounmuybuenejemplodelaIsladelosMonos.

Creaahoradosguas,20pixelsaltura,enlaparteinferiordelcarrusel.Acontinuacin,cree
unnuevogrupoyelnombredelanumeracindepginas.Crearunrectnguloredondeado
definidoconlosvalores800x40px(utilizadolaherramientarectnguloredondeado(U)).
Parafinalizar,utilicelosestilosdefinidosenlosbotonesgrisesdelkitBalio.

Encuantoalanumeracindepginas,elmismomtodoqueutilizaelarchivoPSDenelkit
deBalionumeracionesdepginas.

Parafinalizar,creedosflechasparaelrectngulo(unoenelladoizquierdo,otraenellado
derecho).EstasflechasestndisponiblesenelkitdeBaliotambin.

Vaseacontinuacinelresultadofinalcarrusel:

PASO 4 Crear las cajasParalacreacindelosbloquesdelosquetres

ltimasnoticias,crearprimerounnuevocuadrodegrupoyelnombreque,acontinuacin,
crearunsegundocuadrodegrupoyelnombredebox1.Crearahoraunrectngulo
redondeadodefinidocomo280x220pxelesconelcolor#f5f5f5.Enunesquemaparael
rectngulo.Aadirahoraunaimagenilustrada,conuntamaode266x133pixels.Utilicela
herramientadetexto(T)paraaadirunttuloyunapequeadescripcindelanoticia.Y
ponerunbotnLeermsenlacentrodelrectngulo.Estebotnestdisponibleenelkit
deBalio(PSDarchivodedescargacentro).Parafinalizar,duplicardosveceselelementode
caja1yutilizarlaherramientaMover(V)paracolocarlanoticiaensuanchodela
disposicin.

PASO 5 oferta premiumParacautivaralosvisitantesparairalazona

premiumdelapginaweb,hecreadounabandaazul.Paracrearestabanda,crearun
nuevogrupoyelnombredelaprima.Crearahoraunrectnguloconlaaltura60pixels,alo
largodelaanchuradelaimagen(losestilosdelabandaestndisponiblesenelarchivo
Menu.psddelkitbalio).

Utilicelaherramientadetexto(T)paraaadirellema,acontinuacin,aadirelbotngrisa
laderecha.TextosyestilosbotnestndisponiblesenelkitdeBalio(botnyPSDarchivo
demen).

Grupodelabanda,textoycapasdebotonesenelgrupodealtacalidad.Seleccioneeste
grupoeiraCapaMen>mscaradecapa>Descubrirtodas.Seleccionelaherramientade
degradado(G),acontinuacin,enelselectordedegradado,seleccioneelsegundoprimer
planoatransparente(conelcolornegroenprimerplano).Utiliceestegradientedela
izquierda(desdelaizquierdaalcentro)yluegoaladerecha(desdeladerechahaciael
centro).

PASO 6 Crear la necesidad de aplicacionesUnmendela

derecharecapitulalasaplicacionesmspopularesdelapginaweb,paracrearestabarra
lateral,primerocrearunnuevogrupoyelnombredelabarralateral.Utilicelaherramienta
Rectnguloredondeado(U)paracrearunrectngulodefinidocomo280x480pxelesyque
utilicelosmismosestiloscomolosestilosutilizadosparalaprensa.

Encuantoalacreacindettulos,utilicelosestilossepuedenencontrarenelarchivode
levantamientodelkitBalio.Conrespectoalasestrellas,sepuedenencontraralgunosde
ellosenelsitiowebiconfinder.com.

Iralatiendadeaplicacionesweb,acontinuacin,copiarunlogotipoapartirdeuno
aplicaciones(enmiejemplolasavesenojadojuego).

Utilicelaherramientadetipohorizontal(T)paraaadirelttuloyelnombredelautor.

Aadirahoraunbotndedescargaazulaladerecha(utiliceelbotnmsLeedelanoticia).

encuantoalasbarrasdeprogreso,utiliceelcentrodedescargadearchivospSDo
encuestadelkitBalio.

Paracrearelaligualvnculo,vayaalsitiowebIconFinderycuidardepalabracomopor.)
Aadirahoraeneliconoyeneltexto,ungradientedesuperposicin#6d6d6d

Pongatodaslascapasrelativasalasprimerasaplicacionesenungrupo(nombreque
app1),acontinuacin,duplicarlosgrupos4vecesyelusodelaherramientamover(V)para
aplicartodaslasaplicacionesenunanicacolumna.

PASO 7 Una aplicacin en la parte superiorAla

izquierdadelabarralateral,unaaplicacinseponederelieve.Paracrearestaseccin,
crearunnuevogrupoquenombralapartesuperioraplicacin.Aadirahoraellogotipode
unanuevaaplicacin(irpuedevolveralatiendadeaplicaciones).

VolveralarchivoconrespectoalosmensdelkitBalioeinsertarelmen9.

Paracrearlagalera,copiarypegarunadelasilustracionesdelaimagendelaApp.

acontinuacin,otrosdosmsenambosladosdelaprimeraimagen.Reducirlaopacidadde
estasdosnuevasimgenes.Hacerigualparadosnuevasimgenes.Losresultadosdelos
efectosdelaperspectivadereducireltamaodecadaimagen(parareducireltamaode
imagen,pulselasteclasCtrl+T/Cmdparaactivarlatransformacinlibre).

PASO 8 Crear el pie de pginaParacrearelpiedepgina,empezara

crearunnuevogrupoyelnombredepiedepgina.IralarchivoPSDdelosmensdelkit
deBalioyeltobognysoltarloselementosparacrearunbordeazulyunabandagris.

Utiliceahoralaherramientadetipohorizontal(T)parasimularlosttulosylosenlaces.Para
losiconos,puedefibndalgunosdeellosennuestrapginawebiconfinder.comfavorito(los
estilosestndisponiblesenelmenarchivoPSDdelkitBalio).

Encuantoalaformadeboletnsituadoaladerecha,utilizarestetiempoelarchivoBalioUI
Kitloginform.psdparaencontrarlaentradayelbotn.

paraterminar,crearunanuevacapaycolocarladebajodelascapasdetextos.Crearconla
herramientaMarcoRectangular(M)unaseleccinconuntamaode900x250px.Utilicela
herramientaCubodepintura(G)parallenarlaseleccinconelgris:#edf2f6.

PASO 9 Terminar con el Derecho de AutorParaterminar

laplantilla,creeunltimogrupoyelnombredelDerechodeAutor.Crearunanuevacapay
crearbajoelpiedepgina,unaseleccinconuntamaode900x5px.Utiliceahorala
herramientaCubodepintura(G)parafilencendiconelgris:#67737c.Utilicela
herramientadetipohorizontal(T)paraaadirelDerechodeAutor.

UtiliceelarchivoBalioUIKitcintasocial.psdaadirtresiconosdeladerechaparaTwitter,
RSSyFacebook.

Laplantillahafinalizado.

Conestetutorial,sepuedeverquepodemosrealmentesencillocrearundiseoutilizando
elkitdeBalio.EstemtodosepuedeaplicaratodoslosRecursosqueproporcionamosen
Grafpedia.Porquperdereltiempo,cuandosepuedefcilmenteutilizadaarchivoPSD
listoparausar?

KitBalio:Elkitestdisponibleatravsdelapginawebdenuestraasociacin
webdesignerdepot,paradescargarelkitdeBalio,hagaclicaqu
(http://www.webdesignerdepot.com/2012/01/freedownloadbaliowebuikit/).Graciasa
todoslalecturadeestenuevotutorialdePhotoshopenGrafpedia.Sitegusta,puedes
ayudarnossipromueveestetutorialensusredessocialesTwitter
(https://twitter.com/intent/tweet?
original_referer=http%3A%2F%2Fwww.grafpedia.com%2Ftutorials%2Fdesignpeoplestars
weblayout&source=tweetbutton&text=NewPhotoshopTutorial:HowtousetheBalioUIKit
ToDesignAPerfectiPhoneAppWebLayouthttp://www.grafpedia.com/tutorials/baliouikit
designperfectiphoneappweblayout),Facebook
(http://www.facebook.com/sharer/sharer.php?
src=bm&u=http://www.grafpedia.com/tutorials/baliouikitdesignperfectiphoneappweb
layout)y/otpese(http://www.stumbleupon.com/badge/?
url=http://www.grafpedia.com/tutorials/baliouikitdesignperfectiphoneappweblayout).

Agradecemosaloslectoresmuchohaciendoesteesfuerzo.)
Etiquetas: aplicacin(http://grafpedia.com/tag/app) balio(http://grafpedia.com/tag/balio)
iphone(http://grafpedia.com/tag/iphone) equipo(http://grafpedia.com/tag/kit)
diseo(http://grafpedia.com/tag/layout) sitioweb(http://grafpedia.com/tag/website)

4559 Usuarios 68 503 Los productos de la coleccin

nete grafpedia en
un

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

Facebook(https://www.facebook.com/pages/Grafpediafr/207641172640736)

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

Hoja informativa
Suscrbete para recibir noticias y regalos en su buzn de correo (mximo un correo
electrnico a la semana).
Youremailrequired

Suscribir

Apoyo e Informacin
Acercade(http://www.grafpedia.com/about)
PF(http://www.grafpedia.com/faq)
TrminosdeUso(http://www.grafpedia.com/termsofuse)
polticadeprivacidad(http://www.grafpedia.com/privacypolicy)
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.

Copyright 2015 Grafpedia.com y Grafpedia.fr - Todos los derechos reservados.