Com Dibuixar Una Plantilla Per A Un Lloc Web

Taula de continguts:

Com Dibuixar Una Plantilla Per A Un Lloc Web
Com Dibuixar Una Plantilla Per A Un Lloc Web

Vídeo: Com Dibuixar Una Plantilla Per A Un Lloc Web

Vídeo: Com Dibuixar Una Plantilla Per A Un Lloc Web
Vídeo: OSIsoft: Как настроить шаблон кадра события с помощью PI AF [PI AF 2014- v2.6.0.5843] 2024, Maig
Anonim

Hi ha un gran nombre de plantilles de llocs web al web, però tenen un inconvenient: no són úniques. Si el propietari del lloc no vol que el disseny del seu lloc es repeteixi en cap altre lloc, pot demanar una plantilla a un dissenyador professional o intentar crear-la pel seu compte.

Com dibuixar una plantilla per a un lloc web
Com dibuixar una plantilla per a un lloc web

És necessari

Programa Adobe Photoshop

Instruccions

Pas 1

Crear la vostra pròpia plantilla no és una tasca tan difícil com podria semblar a primera vista. Per treballar, necessiteu Adobe Photoshop; per descomptat, heu de tenir una comprensió bàsica de com treballar-hi. Però abans d’iniciar el programa i començar a crear-lo, heu de pensar amb antelació en el futur disseny. La forma més còmoda de fer-ho és conèixer primer almenys un centenar de plantilles ja preparades, avaluar-ne els avantatges i els inconvenients. Presteu atenció a les solucions d’èxit de determinats elements de disseny. Això no vol dir que els copieu, però és bastant raonable prendre com a base algunes solucions boniques i convenients.

Pas 2

Basat en l’anàlisi de les plantilles d’altres persones i la vostra pròpia creativitat, us heu de fer una idea de com quedarà el vostre lloc. El millor és fer esbossos aproximats del futur disseny amb llapis de colors en fulls A4 normals. Heu de començar a treballar amb Photoshop només després de tenir una idea clara de què dibuixareu exactament.

Pas 3

Inicieu Photoshop, creeu un nou projecte de 1200x1600 i configureu un fons transparent. Activeu l'eina Regle, si encara no està activada, per fer-ho, premeu la combinació de tecles Ctrl + R. Activa el retall: Visualització - Retall.

Pas 4

Ara hem de dividir la plantilla amb guies que mostraran les vores dels seus elements: costats, columnes, etc. Per exemple, voleu dividir la plantilla de manera que hi hagi una columna estreta a l'esquerra, una àmplia columna a la dreta a la dreta de la plantilla i hi hagi espai a la part superior per a una capçalera. Això vol dir que necessiteu tres línies verticals (la vora esquerra de la plantilla, la dreta i la línia entre elles) i una horitzontal, que mostri la vora inferior de la capçalera. Per establir una línia vertical, moveu el cursor cap a la regla esquerra del costat esquerre, premeu V i, mentre manteniu premuda la tecla, arrossegueu la línia fins a la ubicació desitjada. Feu el mateix amb les altres dues línies verticals. Les horitzontals es construeixen de la mateixa manera, només s’utilitza la regla superior.

Pas 5

Cerqueu un fons per a la vostra plantilla; hauria de ser un patró petit i que es repeteixi. Obriu-lo a Photoshop, seleccioneu-lo, copieu-lo. A continuació, enganxeu a la plantilla tantes vegades com necessiteu per omplir-la amb el fons. Enganxar es fa així: "Edita" - "Enganxa" i arrossegueu l'àrea de fons fins a la ubicació desitjada. És encara més ràpid inserir una imatge mitjançant l'ordre Ctrl + V. Afegiu un fons per a la capçalera del lloc de la mateixa manera. Podeu utilitzar diversos farcits de degradat per crear un fons.

Pas 6

Amb l’eina Llapis, dibuixeu les vores de la plantilla, centrant-vos en les línies ja dibuixades (és a dir, damunt d’elles). Heu rebut la base de la plantilla més senzilla, ara heu de complementar-la amb els detalls necessaris: botons de navegació, línies de menú, diversos elements decoratius, etc. Per obtenir més informació sobre com crear botons i altres elements, llegiu els articles corresponents sobre com treballar amb Adobe Photoshop.

Pas 7

La plantilla està creada, ara cal que la talleu a trossos per inserir-la a la pàgina html. Utilitzeu l'eina Slice per tallar. Per trobar-lo, feu clic amb el botó dret a l'eina Marc i seleccioneu Retall al menú que s'obre. Ara podeu niar la plantilla com vulgueu i desar: "Fitxer" - "Desa per al web". A la finestra que s’obre, seleccioneu el tipus de fitxer: HTML i imatges, especifiqueu el nom del fitxer: index.htm i deseu-lo. Tindreu un fitxer index.htm i una carpeta d'imatges amb imatges en rodanxes.

Recomanat: