ElDiseodelainterfazparaPortalRevistaEsteesunodelostutorialesWebquehice.VamosairatravsdealgunasconsideracionesbsicasylosplanesparatomarantesdehacerelactualdiseodeunportalparaRevista.Ustedpuedeencontrarestaguatilparasusprximosproyectos.

Vistapreviadelaimagenfinal

Vamosaempezarconunmachoteparalaspresentaciones.Asimplehacer,sloparatenerunaideadelasposicionesparacadaelemento.Identificarlasseccionesparaformarlabarradenavegacinprincipalylosltimosartculosdeescaparateenlapginaprincipal.

Crearundocumentodetamao9601200pxeles.Esteesunbuentamaoparalosusuariosconresolucindepantallade1024768pxeles.Ajusteelcolordeprimerplano#85848cydefondoa#414048.Hacerundegradadoradialcomoelquesemuestraacontinuacinenlacapadefondo.

Crearunanuevacapaycambiarleelnombrecomoencabezado.Usandolaherramientadelapluma,hacerunatapaenformacomosemuestraenelejemplo.HagaclicsobrelacapadeencabezadoyseleccioneOpcionesdefusin.Compruebeenlasuperposicindedegradadoycreaelgradiente(dearriba:#242329defondo:#363640).Consejorpido:PulselateclaMaysparamantenerunatrayectoriarectacuandoseutilizalaherramientaPluma.

Crearunanuevacapaycambiarleelnombrecomocontenedores.Dibujalasformasconelcolor#2e2d33ylaposicindeacuerdoalastramasquesehicieronbienalprincipio.Puedesusarlareglaparaguiarte.

Escribaelttulodelproyecto,navegacionesytextos.Recordarircreandolosgruposparallevarunasecuenciaenorden.

Crearunanuevacapaycambiarleelnombrecomodivisordenavegacin.TraceunalneaverticalconlaherramientaLpiz,fijadoen1pixelyelcolor#000000.Dibujeotralneade1pxelaladerechaconelcolor#6e6f74.

HagaclicenEditarenmodoMscararpida.Elijalaherramientadedegradadoyseleccionedegradadoreflejado.Esunpequeogradientereflejacomoyolohiceacontinuacin.

Salirdelmododemscararpidayobtendrunaseleccin.PresioneSUPRyobtendrundivisoragradableconbordesdescoloridos.

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

Crearunanuevacapaycambiarleelnombre,comoelcuadrodebsqueda.Repitaelpasosimilarquehizoaprincipiosdelosdestacadosconelcolorcomo#504f57.

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

Colocarlostextosnecesariosyeliconodebsqueda(Search).

Estoesaproximadamenteloquehashechohastaahora.Pasemosalazonacentrodelapresentacindediapositivas.

UsodelaherramientaPluma,dibujarunaformaconbordesredondeadosenlasesquinassuperiorizquierdayderecha.Tengaencuentaqueambosladosestnligeramentesesgadoshaciaelinterior.CambiarelnombredeestacapacomoFronteradediapositivas.

CreeuntamaoderectngulodeseleccinredondeadaigualqueelencabezadoypresionelateclaSUPRenlaFronteradediapositivas.

Dibujarendosmspequeosrectngulosredondeadosenambosladosdelafronteradediapositivas.

Combinartodaslasformasnegrasenunasolacapa.HagaclicsobrelacapayseleccioneOpcionesdefusin.Compruebeenlasuperposicindedegradadoyestablecerelgradientecomoyolohiceacontinuacin(deizquierdaaderecha:#8d8e92,cbcbcd#,#323137,#c3c5d4).CompruebeenResplandorexterioryestablecerelmododecolornormal,a#000000,laopacidadal40%yeltamaoa5.

Dibujaunapequeaflechaapuntandohaciafuerasencillaencadaunodelosdosbotonesdemuestradediapositivas.

Hastaaqutodobien.Vamosaseguiradelanteconlacreacindelafronteraparalasimgenesylasminiaturas.

CrearunanuevacapaycambiarleelnombrecomoFronteraminiatura.Dibujarunaformasencillahexagonalcomolaprimeraalaizquierdaabajo.HacerunaseleccincuadradaenelcentroypresionelateclaSUPR.Esteeseltamaodelaminiaturaquesefijaparaser.Acontinuacin,hagaclicenlacapaPresentacinfronterizaquehashechoantes,yelegirCopiarestilodecapa.SeleccionelacapafronterizaenminiaturayseleccionaPegarestilodecapa.Ustedrecibiralgoascomolaformaltimadeladerechaabajo.

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

Coloquelosbordesdelasminiaturasalrededordetodoslosmarcadoresdeposicindeimagen.Todosustedespuedenllenaralgunoscontenidosdeproyectodetexto.

Ahoravieneelttulo.Ajusteelcolora#000000ycreaunasombraconelcolor#ffffff,elngulode90grados,ladistanciaa1pxel,yeltamaode2pxeles.Apliqueesteestilodecapaatodoslosttulosprincipalesysecundarios.Tambinpuedeagregarlosiconosnecesarios.

Ahoraestamosylistoparaponerenlasimgenes.

Yahlotienen!

Esperoquelesgusteestetutorial.yrecuerdendarlemegustaGracias!