I web designer professionisti sviluppano modelli di siti Web, di solito in potenti editor grafici come Adobe Photoshop. Il risultato del lavoro è un file con un'immagine, che in questo modulo viene fornito al cliente. Per utilizzare il design già pronto, ovvero per disporre una pagina Web, è necessario tagliare il modello.
Necessario
editor di grafica raster Adobe Photoshop
Istruzioni
Passo 1
Apri il file modello nell'editor grafico Adobe Photoshop. Seleziona File e Apri dal menu o premi la combinazione di tasti Ctrl + O. Nella finestra di dialogo che appare dopo, vai alla directory con il file, selezionalo nell'elenco e fai clic sul pulsante "Apri".
Passo 2
Scegli una scala conveniente per visualizzare l'immagine del modello. Usa lo strumento Zoom o le voci del menu contestuale. Seleziona una scala che ti permetta di posizionare il cursore con precisione al pixel. Questo è necessario per impostare con precisione le linee di riferimento.
Passaggio 3
Forma una serie di linee di riferimento sopra l'immagine del modello. Attiva la visualizzazione dei righelli nelle finestre del documento se non è già attiva. Per fare ciò, premi Ctrl + R o seleziona Visualizza e righelli dal menu.
Passaggio 4
Sposta il cursore del mouse sul righello superiore per aggiungere una linea di riferimento orizzontale. Tieni premuto il tasto sinistro. Sposta il cursore del mouse verso il basso nell'area dell'immagine. Allo stesso modo, usando il righello giusto, puoi aggiungere linee orizzontali.
Passaggio 5
Aggiungi il numero richiesto di linee di riferimento e posizionale lungo i confini della divisione delle regioni del modello. Le linee dovrebbero attraversare tutti i punti in cui vuoi tagliare il modello. Dovrebbero vincolare tutte le immagini e le aree logiche (logo, intestazione del sito, menu orizzontali e verticali, ecc.) che verranno presentate su una pagina web.
Passaggio 6
Attiva lo strumento Taglia. Il suo pulsante si trova sulla barra degli strumenti verticale.
Passaggio 7
Crea il numero richiesto di aree di taglio utilizzando lo strumento Slice. Scegli una scala conveniente per visualizzare il modello. Usa il mouse per impostare i confini delle aree. Le linee guida aggiunte nel terzo passaggio forniranno un posizionamento preciso dei confini degli oggetti che crei. Se necessario, regolare le aree esistenti utilizzando lo strumento di selezione delle sezioni.
Passaggio 8
Modificare le proprietà delle aree di taglio secondo necessità. Attiva lo strumento di selezione delle sezioni. Fare clic con il pulsante destro del mouse sull'area desiderata. Nel menu contestuale, seleziona la voce Modifica opzioni sezione. Nella finestra di dialogo Opzioni sezione che appare, seleziona il tipo di area (immagine, area vuota, tabella), la modalità di riempimento dello sfondo, specifica, se necessario, il nome, l'URL di destinazione, il contenuto dell'attributo alt="Immagine" e altri valori. Fare clic su OK.
Passaggio 9
Taglia il modello. Seleziona File e salva per Web e dispositivi dal menu oppure premi Maiusc + Ctrl + Alt + S. Nella finestra di dialogo Salva per Web e dispositivi, specificare il formato ei parametri di compressione dell'immagine in cui verrà tagliato il modello. Fare clic sul pulsante Salva. Verrà visualizzata la finestra di dialogo Salva ottimizzato con nome.
Passaggio 10
Selezionare HTML e immagini (*.html) nell'elenco a discesa Tipo di file e nel campo Nome file immettere il nome del file in cui verrà posizionato il markup HTML del modello. Nell'elenco delle sezioni, seleziona Tutte le sezioni. Specificare la directory per l'output e fare clic sul pulsante "Salva".
Passaggio 11
Un file HTML verrà inserito nella directory di destinazione, che è, di fatto, un modello di pagina Web già pronto. La sottodirectory delle immagini conterrà l'insieme di immagini in cui è stato tagliato il modello originale.
