|
Poslao: 15 Jun 2015 23:48
|
offline
- dejnik978
- Zaslužni građanin
- Pridružio: 25 Mar 2015
- Poruke: 548
|
Napisano: 15 Jun 2015 13:15
Poceo sam da ucim codiranje psd-templejta u bootstrap sajt, znam da treba odlicno poznavanje css, html-a i po potrebi scripti. Ali vazno je uciti i poceti. Radicu na sliciranju i codiranju websajta pa cu pritom imati neka pitanja koja ce biti verovatno pocetnicima zanimljiva a pre pitanja pokusacu da nadjem odgovore. Radim u licenciranoj na poklon dobijenoj verziji alata. Hvala i pozdrav
Da li je ovakvo ucenje i pocetak pravilan
1. Otvorim psd nekim alatom.
 
2. Iskljucim sve elemente da bih dosao do slike u headeru ili jumbotronu, u psd treba da ostane samo jpg slika.
Kad odradim pozadinsku sliku jumbotron ili header da li se kodira u originalnoj velicini kao ovde
1920 x 800
Da li se ova velicina uskladjuje sa klijentom
3. Od svih elemenata koristim samo pozadniske slike, ikonice, logo iconu, sve ostalo moguce je da se odradi css-om.
4. Sve slike se cuvaju u png formatu
5.Primer za ikonicu
Sa strane bara alata iskljucimo sve osim ikonice
Idemo na slice tool i isecemo ikonicu, gledamo da bude secenje ikonice bude sto pribliznije ikoni
Sacuvamo na save as web i odaberemo png u gornjem uglu
Zatim joj damo naziv
i idemo na ok
Zatim idemo na save as web
Sve se radi na isti nacin, iskljuci se sve osim slike pozadine, isecu i cuvaju slicice, ikonice, logo, isl. i ste se kao transparentne cuvaju u png formatu. Moraju biti transparent da bi se prilagodile boji koju zadamo u css-u. To bi bilo to sto se tice seckanja. Sada ide deo kodiranja.
|
|
|
|
|
Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
|
|
|
Poslao: 15 Jun 2015 23:49
|
offline
- dejnik978
- Zaslužni građanin
- Pridružio: 25 Mar 2015
- Poruke: 548
|
Deo Kodiranje:
Da li moze ovako za row .row {
margin-right: 80px;
margin-left: 80px;
}
Radim ga po bootstrapovim pravilima, klasama ali mi se samo uklapa ovaj plavi deo kad odredim margine na 80px. Da li moze drugacije, pozdrav
.row {
margin-right: 80px;
margin-left: 80px;
}
.prvi_deo
{
background-color: #4bcaff;
width:100%;
height:auto;
color:#fff;
padding-top: 0;
}
|
|
|
|
|
|
|
Poslao: 17 Jun 2015 23:49
|
offline
- m4rk0
- Administrator
- Administrator tech foruma
- Marko Vasić
- Gladijator - Maximus Decimus Meridius
- Pridružio: 14 Jan 2005
- Poruke: 15766
- Gde živiš: Majur (Colosseum)
|
Ne smes dirati row klasu na taj nacin. Nesto ne radis pravilno cim ti se ne uklapa ta plava sekcija. Layout je takav da centralni sadrzaj svake sekcije treba da bude u .container klasi a svaka .container klasa unutar .container-fluid klase. Pa bi ta plava sekcija na pr bila
<section id="plava-sekcija" class="container-fluid">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Services</h2>
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="images/slicica-1.png" alt="" class="img-responsive">
<h3>Coffe</h3>
<p>Blabla bla naanlsna asjalhsakh asjhashakjha alshashahk</p>
</div>
<div class="col-md-3">
<img src="images/slicica-2.png" alt="" class="img-responsive">
<h3>Instant</h3>
<p>Blabla bla naanlsna asjalhsakh asjhashakjha alshashahk</p>
</div>
<div class="col-md-3">
<h3>Serious</h3>
<img src="images/slicica-3.png" alt="" class="img-responsive">
<p>Blabla bla naanlsna asjalhsakh asjhashakjha alshashahk</p>
</div>
<div class="col-md-3">
<h3>Frame</h3>
<img src="images/slicica-3.png" alt="" class="img-responsive">
<p>Blabla bla naanlsna asjalhsakh asjhashakjha alshashahk</p>
</div>
</div>
</div>
</section>
Pa bi u css podesio id te glavne sekcije i onda svaki njen element posebno (h2, h3, img, p itd)
#plava-sekcija {
background-color: blue; /*bezveze sam stavio blue, ti ces naravno color pickerom u photoshopu videti koja je tacno nijanasa plave boje*/
}
#plava-sekcija h3 {
color: #fff;
text-transform: uppercase;
/*itd itd*/
}
|
|
|
|
|
|
|
|
|
Poslao: 18 Jun 2015 21:50
|
offline
- m4rk0
- Administrator
- Administrator tech foruma
- Marko Vasić
- Gladijator - Maximus Decimus Meridius
- Pridružio: 14 Jan 2005
- Poruke: 15766
- Gde živiš: Majur (Colosseum)
|
Preko photoshopa mozes apsolutno sve da "pokupis" iz psd fajla: font, boju, razmake medju elementima, secenje elemenata itd. Sto se tice fonta potrebno je samo izabrati "type tool", kliknuti na tekst ciji font zelis da vidis i u gornjoj paleti photoshopa ces videti i vrstu fonta ( font-family) i velicinu i boju.
Type tool ti je jasno oznacen na slici: [Link mogu videti samo ulogovani korisnici]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
