ElDiseodelainterfazparaPortalRevista

EsteesunodelostutorialesWebquehice.Vamosairatravsdealgunasconsideracionesbsicasylosplanesparatomarantes
dehacerelactualdiseodeunportalparaRevista.Ustedpuedeencontrarestaguatilparasusprximosproyectos.
Vistapreviadelaimagenfinal

Vamosaempezarconunmachoteparalaspresentaciones.Asimplehacer,sloparatenerunaideadelasposicionesparacada
elemento.Identificarlasseccionesparaformarlabarradenavegacinprincipalylosltimosartculosdeescaparateenlapgina
principal.

Crearundocumentodetamao9601200pxeles.Esteesunbuentamaoparalosusuariosconresolucindepantallade1024
768pxeles.Ajusteelcolordeprimerplano#85848cydefondoa#414048.Hacerundegradadoradialcomoelquesemuestraa
continuacinenlacapadefondo.

Crearunanuevacapaycambiarleelnombrecomoencabezado.Usandolaherramientadelapluma,hacerunatapaenformacomo
semuestraenelejemplo.HagaclicsobrelacapadeencabezadoyseleccioneOpcionesdefusin.Compruebeenlasuperposicin
dedegradadoycreaelgradiente(dearriba:#242329defondo:#363640).
Consejorpido:PulselateclaMaysparamantenerunatrayectoriarectacuandoseutilizalaherramientaPluma.

Crearunanuevacapaycambiarleelnombrecomocontenedores.Dibujalasformasconelcolor#2e2d33ylaposicindeacuerdo
alastramasquesehicieronbienalprincipio.Puedesusarlareglaparaguiarte.

Escribaelttulodelproyecto,navegacionesytextos.Recordarircreandolosgruposparallevarunasecuenciaenorden.

Crearunanuevacapaycambiarleelnombrecomodivisordenavegacin.TraceunalneaverticalconlaherramientaLpiz,fijado
en1pixelyelcolor#000000.Dibujeotralneade1pxelaladerechaconelcolor#6e6f74.

HagaclicenEditarenmodoMscararpida.Elijalaherramientadedegradadoyseleccionedegradadoreflejado.Esunpequeo
gradientereflejacomoyolohiceacontinuacin.

Salirdelmododemscararpidayobtendrunaseleccin.PresioneSUPRyobtendrundivisoragradableconbordes
descoloridos.

Crearunanuevacapaycambiarleelnombrecomopuntoculminante.DibujarunaformaRectnguloredondeadoconelcolor
#242329.HagaclicsobrelacapayseleccioneOpcionesdefusin.Compruebeelresplandorinterioryestablecerelmododecolor
normal,a#000000,laopacidadal30%yeltamaoa5.

Crearunanuevacapaycambiarleelnombre,comoelcuadrodebsqueda.Repitaelpasosimilarquehizoaprincipiosdelos
destacadosconelcolorcomo#504f57.

Hacerunbotnconelgradientevertical(dearriba:#b8b7c5aabajo:#95949c).

Colocarlostextosnecesariosyeliconodebsqueda(Search).

Estoesaproximadamenteloquehashechohastaahora.Pasemosalazonacentrodelapresentacindediapositivas.

UsodelaherramientaPluma,dibujarunaformaconbordesredondeadosenlasesquinassuperiorizquierdayderecha.Tengaen
cuentaqueambosladosestnligeramentesesgadoshaciaelinterior.CambiarelnombredeestacapacomoFronterade
diapositivas.

CreeuntamaoderectngulodeseleccinredondeadaigualqueelencabezadoypresionelateclaSUPRenlaFronterade
diapositivas.

Dibujarendosmspequeosrectngulosredondeadosenambosladosdelafronteradediapositivas.

Combinartodaslasformasnegrasenunasolacapa.HagaclicsobrelacapayseleccioneOpcionesdefusin.Compruebeenla
superposicindedegradadoyestablecerelgradientecomoyolohiceacontinuacin(deizquierdaaderecha:#8d8e92,cbcbcd#,
#323137,#c3c5d4).CompruebeenResplandorexterioryestablecerelmododecolornormal,a#000000,laopacidadal40%yel
tamaoa5.

Dibujaunapequeaflechaapuntandohaciafuerasencillaencadaunodelosdosbotonesdemuestradediapositivas.

Hastaaqutodobien.Vamosaseguiradelanteconlacreacindelafronteraparalasimgenesylasminiaturas.

CrearunanuevacapaycambiarleelnombrecomoFronteraminiatura.Dibujarunaformasencillahexagonalcomolaprimeraala
izquierdaabajo.HacerunaseleccincuadradaenelcentroypresionelateclaSUPR.Esteeseltamaodelaminiaturaquesefija
paraser.Acontinuacin,hagaclicenlacapaPresentacinfronterizaquehashechoantes,yelegirCopiarestilodecapa.
SeleccionelacapafronterizaenminiaturayseleccionaPegarestilodecapa.Ustedrecibiralgoascomolaformaltimadela
derechaabajo.

CrearunanuevacapaporencimadelaFronteraenminiaturayhacerunbordede1pxelalrededordeella.Hacerungradientede
arribahaciaabajo(dearriba:#ffffffaabajo:#666666).HagalomismoparaelladointernodelaFronteraenminiatura,
peroinvertirelgradienteesoestodo.

Coloquelosbordesdelasminiaturasalrededordetodoslosmarcadoresdeposicindeimagen.Todosustedespuedenllenar
algunoscontenidosdeproyectodetexto.

Ahoravieneelttulo.Ajusteelcolora#000000ycreaunasombraconelcolor#ffffff,elngulode90grados,ladistancia
a1pxel,yeltamaode2pxeles.Apliqueesteestilodecapaatodoslosttulosprincipalesysecundarios.Tambin
puedeagregarlosiconosnecesarios.

Ahoraestamosylistoparaponerenlasimgenes.

Yahlotienen!

Esperoquelesgusteestetutorial.yrecuerdendarlemegustaGracias!