Çözüldü Photoshop web tasarımı responsive nasıl yaparım?

Merhabalar. Ben photoshopta 1920x5000 web tasarım ile çalışıyorum. Güzel işte çıkardım ama bunu exportladığımda çok büyük gözüküyor. Ben bunun responsive olmasını nasıl sağlayabilrim? Eklenti ile vb. ya da herhangi bir güzel öğretici kaynak var ise atabilir misiniz? emeğimin boşa gitmesini istemiyorum.

Sanırsam artboard ile yapacağım doğru mudur?

graiker olmak istiyorsan önce yapılan hataları nasıl düzelteceğine bak Forumumuzda birçok Grafiker Var.yardım alabilirsin ama soruna cevap olarak fotoğraf küçültmeyi öğren sonra daha rahat olabilirsin...

bootstrap öğrenmen lazım. zor değil merak etme.

Html İle Kolayca Yapabilirsin Eğer Aracı Bir Program Kullanmak İstemiyorsan Yukarıda Dendiği Gibi Bootstrap Kullanabilirsin Kolay Bir Şey Ama Html Taglarının Ne İşe Yaradığına Da Bakman Gerekiyor

Muratozturk' Alıntı:

Merhabalar. Ben photoshopta 1920x5000 web tasarım ile çalışıyorum. Güzel işte çıkardım ama bunu exportladığımda çok büyük gözüküyor. Ben bunun responsive olmasını nasıl sağlayabilrim? Eklenti ile vb. ya da herhangi bir güzel öğretici kaynak var ise atabilir misiniz? emeğimin boşa gitmesini istemiyorum.

Genişletmek için tıkla ...

... O web programcısının görevi, responsive tasarıma uymayan yanları sana web programcısı söyler sen düzeltirsin. Kodlama biliyorsan zaten gözüne çarpar... Temel bazı şeyler vardır; tasarımı göz kararı satır ve sütunlara ayırdığında en az bir satır ve bir sütun için "ya burası büyüyebilir de, küçülebilir de, farketmez" diyebilmelisin. Hiç bir şey "illa ki bu boyutta olacak, yoksa çirkin görünür" diyeceğin durumda olmasa çok iyi olur ama en fazla tek satır/sütun sabit boyutta olmalıdır. Onun haricinde tasarımı bir web programcısına göster, ihtimal "ne var bunu yaparım" diyecek.

Zaten telefon için hemen hemen her zaman ikincil bir tasarım yapılır.

zztri' Alıntı:

... O web programcısının görevi, responsive tasarıma uymayan yanları sana web programcısı söyler sen düzeltirsin. Kodlama biliyorsan zaten gözüne çarpar... Temel bazı şeyler vardır; tasarımı göz kararı satır ve sütunlara ayırdığında en az bir satır ve bir sütun için "ya burası büyüyebilir de, küçülebilir de, farketmez" diyebilmelisin. Hiç bir şey "illa ki bu boyutta olacak, yoksa çirkin görünür" diyeceğin durumda olmasa çok iyi olur ama en fazla tek satır/sütun sabit boyutta olmalıdır. Onun haricinde tasarımı bir web programcısına göster, ihtimal "ne var bunu yaparım" diyecek.

Zaten telefon için hemen hemen her zaman ikincil bir tasarım yapılır.

Genişletmek için tıkla ...

açıklama için sağolun hocam. teşekkürler.

Şimdi Photoshop'da yaptığın tasarımı tarayıcı üzerinde ön izleme yaparsın yaptığın tasarımı birebir de görürsün. O bir kod olarak değil görsel olarak karşına çıkar. Yani onun responsive olması mümkün değil zaten. Yapılan photoshop çiziminin web tasarımcı tarafından responsive olarak kodlanması gerekiyor. Ayrıca Photoshop'da web tasarımı yani çizimi yaparken %100 çalışmaya özen göstermelisin, çünkü sen bir web sitesine girdiğin zaman onu %100 en iyi şekilde görürsün, mesela tarayıcında bir web sitesine bakarken %100 değil de %150 şeklinde artırır bakarsan veya aynı şekilde Photoshop'da o şekilde bakarsan, piksel değerleri daha belirgin olacağından güzel gözükmez, o yüzden en iyi görünüm %100 bakmaktır, gerisi seni yanıltmasın. Yazılarını, çizimlerini %100 görünümdeyken yaparsan, tasarımın web ortamında daha sağlıklı görünecektir.

Aynı zamanda ÖNEMLİ NOT olarak Photoshop tasarımını yaparken ekran çözünürlüğün kaç px genişlikte ise o şekilde sayfa oluştur. 1366px bir laptop ekranın varsa 1920 de çalışmak doğru bir görünüm sağlamaz.

Photoshop export kit var o işe yarayabilir mi exportta?

Bootstrap öğren Öreneğin bir resim her boyutta ayarlamak için

kod
HTML
<img class="img-fluid" src="ResminYeri">
CSS
Media(max-width:576px){
margin uygulaması yapılabilir yani bu boyutta nasıl gözüksün vs vs
}Telefonlar için ve ayar yapalım şimdi
Media(max-width:1200px){
margin uygulaması yapılabilir yani bu boyutta nasıl gözüksün vs vs
}Bilgisayar boyutları vs vs detay için öm atabilirsiniz

tasarımı dışa aktar Media (max-width: 800px) { } yapman yeterli.

Muratozturk' Alıntı:

Photoshop export kit var o işe yarayabilir mi exportta?

Genişletmek için tıkla ...

Tekrar ediyorum, normalde sen photoshop'ta bir şey yapınca, onu layerlı haliyle frontend yapan programcıya verirsin.

O layerları tek tek slice eder, html'in içine döşer, bazı şeyleri (mesela kenarlar, arka plan renkleri vs) kodla yapar, responsive olması veya olmaması onun görevidir. Tasarım responsive mantığına çok aykırı ise sana söyler "bak burası ekran büyüyüp küçüldükçe çirkin olacak" diye, düzeltirsin.

Üstad kendin yapacaksan ufaktan başla html'e, dediğimi anlayacaksın zaten.

zztri' Alıntı:

Tekrar ediyorum, normalde sen photoshop'ta bir şey yapınca, onu layerlı haliyle frontend yapan programcıya verirsin.

O layerları tek tek slice eder, html'in içine döşer, bazı şeyleri (mesela kenarlar, arka plan renkleri vs) kodla yapar, responsive olması veya olmaması onun görevidir. Tasarım responsive mantığına çok aykırı ise sana söyler "bak burası ekran büyüyüp küçüldükçe çirkin olacak" diye, düzeltirsin.

Üstad kendin yapacaksan ufaktan başla html'e, dediğimi anlayacaksın zaten.

Genişletmek için tıkla ...

hocam azda olsa biliyorum ama devam edeceğim. Aynı zamanda c#ile de uğraşıyorum teşekkürler yorumlar için :

Arkadaşlar herkese çok teşekkürler yavaştan giriş yaptım anlamaya başladım. img etiketine max width vb atadım css ile.


Herkese çok teşekkürler

Emeğiniz İçin Teşekkürler

Muratozturk' Alıntı:

Arkadaşlar herkese çok teşekkürler yavaştan giriş yaptım anlamaya başladım. img etiketine max width vb atadım css ile.

Kod:

 *********    

    img
    {
       max-width: 100%;
       height: auto;
        
        
    }

</style>

Herkese çok teşekkürler

Genişletmek için tıkla ...

dostum sorunun çözüldü sanırım

zztri' Alıntı:

Tekrar ediyorum, normalde sen photoshop'ta bir şey yapınca, onu layerlı haliyle frontend yapan programcıya verirsin.

O layerları tek tek slice eder, html'in içine döşer, bazı şeyleri (mesela kenarlar, arka plan renkleri vs) kodla yapar, responsive olması veya olmaması onun görevidir. Tasarım responsive mantığına çok aykırı ise sana söyler "bak burası ekran büyüyüp küçüldükçe çirkin olacak" diye, düzeltirsin.

Üstad kendin yapacaksan ufaktan başla html'e, dediğimi anlayacaksın zaten.

Genişletmek için tıkla ...

Bunlara ekstra olarak birkaç bir şey eklemek istiyorum bende. Kısa bir süre Photoshop kullanmış birisi olarak, grid sistemi kullanmanızı öneririm. Photoshop üzerinde 12 bölümlere ayrılmış grid sistemler internette mevcut. Grid sistemi niye photoshopda kullanayım diyorsan, frontend yazan kişiye kolaylık olsun diye. Kendin yazıyor isen çok kolaylık sağlayacaktır sana.

Örnek veriyorum tüm site container içerisinde olacak, photoshopdaki tasarım ise çok farklı bu durumda. Frontend kısmında ilgili kısımları ekstra küçültmesi gerekiyor, hatta tasarım bile değişebiliyor bu gibi durumlarda. Hem web sitenin mobil tasarımı da photoshop üzerinden ile kodlamak çok daha kolay olacaktır. Size çok güzel bir araç da söyleyip bu yazıyı sonlandırmak istiyorum. Zeplin.io adındaki aracı mutlaka kullanın. Buna benzer araçlar kullandım ücretsiz olarak en çok hoşuma giden buydu. Photoshop üzerindeki tasarımınızı zepline isterseniz parça parça yolluyor isterseniz tek seferde yolluyorsunuz. Yolladıktan sonra web, masaüstü uygulaması ile zepline giriş yaptıktan sonra tasarım karşınızda oluyor ve renkler, boyutlar, resim logo vs var ise indirme seçeneği, button gibi kısımların css kodları karşınıza çıkıyor. Tasarımcı ve kodlayıcı arasındaki sorunu tamamen kaldırıyor.

https://psdtoweb.de/ basit bir şeyler üzerinde çalışıyorsan eğer psd dosyanı bu siteye upload et sana index halinde veriyor

Axoy Design' Alıntı:

dostum sorunun çözüldü sanırım

Genişletmek için tıkla ...

Aynen hocam çözüldü.........................