tuto pag web_gimp

Download Tuto pag web_gimp

Post on 05-Jul-2015

131 views

Category:

Design

1 download

Embed Size (px)

TRANSCRIPT

  • Parte1/4:DiseodeunsitioyenelCdigoconGimp,HTMLyCSSMuchosdiseadoresdepginaswebparaprincipiantestienenproblemasparaeldiseodesitiosy, a continuacin, la codificacindemaneraadecuaday acabande pasar a las mesas y deDreamweaver. Enestetutorialtemostrar cmodisearunsitioenTheGimpyluegoenelcdigoXHTMLyCSSvlidoscondivsylasclases(nocuadros).

    Estaeslaprimerapartedeunaseriedecuatropartessobreestetema,estapartesecentrareneldiseodeTheGimp,parte2,3y4estardedicadoalacodificacinlistoparalaweb.AsquevolverenelprximopardesemanasosuscribirseanuestrofeedRSS.

    Asqueaquvamos:

    Paso1CrearunanuevaimagenenTheGimp,que960px(anchura)por900px(altura)ylorellenamosdecolorgrisoscuro(333333)

    Paso2Ahoracrearunanuevacapade900pxdeanchoylollamanpgina,llenarloconblanco(FFFFFF).Uselasteclasdeflechaparamoverenelcentrodelaimagencomoesta:

    http://74.125.67.132/translate_c?hl=es&ie=UTF-8&sl=en&tl=es&u=http://help-developer.com/index.php/2008/06/part-14-design-and-code-a-site-with-gimp-html-and-css/&rurl=translate.google.com.mx&usg=ALkJrhj2hNCA00iNQSiz6rxCNBF3Wgqe0ghttp://74.125.67.132/translate_c?hl=es&ie=UTF-8&sl=en&tl=es&u=http://help-developer.com/index.php/2008/06/part-14-design-and-code-a-site-with-gimp-html-and-css/&rurl=translate.google.com.mx&usg=ALkJrhj2hNCA00iNQSiz6rxCNBF3Wgqe0ghttp://74.125.67.132/translate_c?hl=es&ie=UTF-8&sl=en&tl=es&u=http://feeds.feedburner.com/HelpDeveloper&rurl=translate.google.com.mx&usg=ALkJrhhLDg2mbJyFYHzMuPWlOXbHFW_vDg
  • Paso3IraFiltros>LuzySombra>DropShadowyconfigurareloffsetOffsetXyYa0ydesmarcaPermitircambiareltamao,hagaclicenAceptar.Estoaadirunasombraparaelreadelapgina.

    Paso4Crearunanuevacapallamadadecabecerayhacer900pxdeanchoy150pxdealtura,pasarensulugarcomoeste:

  • Paso5Ajusteelcolordefrentea205.974yelcolordefondoa84a3e3yseleccionelaherramientademezcla.Hagaclicyarrastredesdelaparteinferiordelacapaalapartesuperiorparacrearesteefecto:

  • Paso6Seleccionelaherramientayhagaclicenseleccionaryarrastrarunrectngulodealtura5pxenlapartesuperiordelacapaylarellenamosconelcolordeprimerplano.

  • Paso7AhoraduplicarlacapaypulseEliminarlacapadevaciardesucontenido,estoleahorrartiempoyaquenonecesitacrearunanuevacapaylaposicindelamisma.ConlaherramientaSeleccionar,hagaclicyarrastrelacapaatravsdeunrectngulode100%deanchoyalturade1pxylorellenamosdenegro(000000)ydebajodelexactamentelomismo,estavezllenadoconblanco.Acontinuacin,cambiarlaopacidaddelacapaa10,0.Estoproduciresteefecto(sitienedificultadesparaentenderelpresentey,acontinuacin,checamitutorialsobreestaaqu:

    http://74.125.67.132/translate_c?hl=es&ie=UTF-8&sl=en&tl=es&u=http://help-developer.com/index.php/2008/05/30/create-an-engraved-line-effect-in-the-gimp/&rurl=translate.google.com.mx&usg=ALkJrhj81Zg2PTKFpDco2gOWwwTaLME73g
  • Paso8Duplicarlacapadelapginayborrarsucontenidoy,acontinuacin,utilizandolaherramientadeseleccionardibujarunrectnguloenlapartederechadelapginaconunanchode320px.Llenarlocon84a3e3ycambiarlaopacidaddelacapaa15,0,loquepresentalasiguiente:

  • Paso9Ahoracrearunanuevacapaconunanchode900pxyunaalturade100pxylollamanelpiedepgina,ellugarqueenlaparteinferiordeldiseocomoesteylorellenamosde205.974:

  • Paso10Hagaclicenelmarcodelreadegrabadoyaadirloselementosdelmenquedesea,cambiarlafuenteaArialnegritatamao14decolorblanco(FFFFFF)ymoverlacapaparaqueseparezcaaesta:

  • Paso11Duplicarlacapasuperiordecabecerayborrarsucontenido,ahorabajoelgrabadolneasdibujaunrectnguloylorellenamosdeblanco(FFFFFF)ycambiarlaopacidada10,estocrearesteefecto:

  • Paso12Por ltimo, aadir que el logotipo utilizando la opcin Abrir comocapas en el men Archivo ycolqueloenlapartesuperiorizquierdadelacabeceradelazonacomoesta:

    Yesoestodoporestaparte,hemoscreadounsencillodiseoquesecorteenlasiguientepartedeestetutorialyquestaestpreparadaparalacodificacin.HaymuchomejorquelosdiseosquesepuedenrealizarenTheGimp,perosloquieromostrarquelosfundamentosdeestaserie.Comodijealprincipio,volverosuscribirseanuestrofeedparasernotificadocuandolasnuevaspiezasestn.

  • Parte2/4:DiseodeunsitioyenelCdigoconGimp,HTMLyCSSBienvenidosalamuyanticipadasegundaparte. Miagradecimientoatodoslosquehansidoestimularaprisayescribirlaparte2,asqueaquest.

    Enlasegundapartedeestaseriede4,voyamostrarcmoeldiseolistoeltramoparalacodificacin.Este es el proceso por el cual estamos bsicamente de corte en cada elemento por separado lasimgenesdispuestaacdigoenelsitio.

    Paso1Creaunanuevacarpetaenelequipoydentrodeestacarpetaagregarotracarpetallamadaimgenes.

    Paso2Regresaralaimagenyabrireldilogodecapas,seleccioneunojoalladodellogotipodelacapa,lacapahovermendenavegacinydelacapadetextoparaquelaimagenahorapareceesto:

    http://74.125.67.132/translate_c?hl=es&ie=UTF-8&sl=en&tl=es&u=http://help-developer.com/index.php/2008/06/part-24-design-and-code-a-site-with-gimp-html-and-css/&rurl=translate.google.com.mx&usg=ALkJrhhrEbK7EoHvgdLtT4MI880VrOtb_Qhttp://74.125.67.132/translate_c?hl=es&ie=UTF-8&sl=en&tl=es&u=http://help-developer.com/index.php/2008/06/part-24-design-and-code-a-site-with-gimp-html-and-css/&rurl=translate.google.com.mx&usg=ALkJrhhrEbK7EoHvgdLtT4MI880VrOtb_Q
  • Paso3Ahora,utilizandolaherramientaSeleccionar,hagaclicyarrastredesdelaesquinasuperiorizquierdaaladerechajustoencimadelalneadegrabado,lareginseleccionadadebe960pxx108px(busqueenla parte inferior de la ventana por el 100% mientras arrastra el botn para ver el seleccionadodimensiones)

    Paso4VolveralmenEdicinyseleccionePegarestemomentoy,acontinuacin,ComoNuevaImagen.Estoabrirunanuevaimagencopiadadelaregin.Guardarestaimagencomoenlasimgenesheader.pngcarpetaquecreanteriormente.

    Paso5Regresara la lona, si lareginyanoesseleccionadoacontinuacin,pulseCtrl yZhastaqueseseleccione.Sicolocaelratnsobrelapartesuperiordelazonaseleccionada,tedarscuentadequeestaaparece:

  • Paso6Hagaclicyarrastreestabarrasuperiorenelreadelaparteinferiordelazonaseleccionadadetodoselcaminoalaparteinferiordelacabeceradelazonaenlaimagenparaquelaseleccinahorapareceesto,lareginseleccionadadebe960pxx42px:

    Paso7AhoracomoanteslareginvisibleCopiarypegarcomounanuevaimagen,estavezdeguardarlocomomenulinks.png

    Paso8Vayaahoraalacapadedilogoyvolveralacapamenuhoveryregresaralalona. Elreaparalamenulinksdeberaestaranseleccionada,ahoraestetiempo,agarrarelmangodeladerechadelreaseleccionadaylaposicinalgunadentrodelazonamenuhover,hacerlomismomanejaralaizquierdaparaquelaseleccinsevealgocomoesto:

  • Paso9Copiarelreaseleccionadaypegarcomounanuevaimagenllamndolomenuhover.png

  • Paso10Ahoraseleccionaalaizquierdadelaimagenaladerechadelaimagenencualquierlugardelaseccincentraldeestemodo:

    Paso11Copieelreavisibleypegarcomounanuevaimagen.Guardarloenlacarpetadeimgenesllamndolapage.png

    Paso12Vayaalazonadepiedepginayseleccionelaregindepiedepgina,debeser128100pxelesdealto.Yentonces,adivinenqu?S,tienesrazn,lazonavisiblecopiaypegacomounanuevaimagenylollamanfooter.png

    Paso13Porltimo,hagaclicenelojoalladodellogodelacapayseleccionelapartesuperiorizquierdadelaimagenalaparteinferiorderechadellogotipo,lazonavisiblecopiaypegacomounanuevaimagenllamndolologo.png

  • ResultadosAhora debera tener una carpeta con imgenes de una carpeta llamada interior. La carpeta debecontenerimgenesheader.png,menulinks.png,menuhover.png,page.png,footer.pngylogo.png.Puededescargarelarchivo.ZipconelcorteoriginaldelasimgenesyelarchivoXCFaqu.

    Enlaparte3,yotemostrarcmoiniciarlacodificacindelaplantillaenXHTMLyCSSvlidos.

    http://help-developer.com/wp-content/uploads/2008/06/template.zip
  • Parte3/4:DiseodeunsitioyenelCdigoconGimp,HTMLyCSSBienvenidoalaparte3demiseriesobreeldiseoylacodificacindeunapginawebconelGimp,HTMLyCSS.Enestapartevoyamostrartecmoiniciarlacodificacindelsitio.

    Paso1Paracrearlosarchivosquenoesnecesarioningnprocedimientoespecial,sloelBlocdenotasouneditordetextodealgntipo(noMSWord).Enprimerlugar,guardarambosarchivosenlacarpetaquecreanteriormente.Laestructuradelacarpetadebeteneresteaspecto:

    Paso2Enelindex.htmltenemosquecrearlaestructurahtmlaadirestecdigo:

    Estossedenominanetiquetashtml. Enlacabezaentrelasetiquetasirtodalainformacin,comolosscriptsyelestiloyenlasetiquetas"body"vatodoelcontenido.

    http://74.125.67.132/translate_c?hl=es&ie=UTF-8&sl=en&tl=es&u=http://help-developer.com/index.php/2008/06/part-34-design-and-code-a-site-with-gimp-html-and-css/&rurl=translate.google.com.mx&usg=ALkJrhhIhD0d0RghbtM3PpE9nNXk-HHCJwhttp://74.125.67.132/translate_c?hl=es&ie=UTF-8&sl=en&tl=es&u=http://help-developer.com/index.php/2008/06/part-34-design-and-code-a-site-with-gimp-html-and-css/&rurl=translate.google.com.mx&usg=ALkJrhhIhD0d0RghbtM3PpE9nNXk-HHCJw
  • Paso3Ahoravamosarellenarlaseccindecabeceradelaplantilla,deaquvamosaaadirelttuloquesemuestraen labarrade ttulocuandove lapginayunenlacea lahojadeestilo CSS(style.css).Tambinpuedeaadirmetaetiquetasaqusilodesea.

    Aadirestecdigoentrelasy.

    SITIO WEB

    - --

    Paso4Ahoravamosaaadiraloscomponentesdeladivarchivoindex.html.Undivesunaetiquetaqueesdeestilo en CSS y puede ser utilizado en HTML como un contenedor que posee contenido. Acontinuacinsemuestraunaimagendecmoeldivsvanaserexpuestasennuestraplantilla:

    http://74.125.67.132/translate_c?hl=es&ie=UTF-8&sl=en&tl=es&u=http://www.w3schools.com/tags/tag_meta.asp&rurl=translate.google.com.mx&usg=ALkJrhjznIOOGJI2o1WlOLOnbezBAwayiA
  • Paso5Aadirelsiguientecdigoalarchivoindex.htmlentrelaytags:

    TodosloselementosestncontenidosdentrodelapginadivcontentAreaylabarralateralyestncontenidasenunsubgrupodenominadomainareadiv.

    Paso6Ahora,siustedfueraaabrirelarchivoindex.htmlahora,ustednovenadaesporqueno