زهقت خلاص..كيف احول ملف PSD لموقع HTML ؟

السلام عليكم اخواني الكرام ...

اولاً : عيدكم مبارك و ينعاد عليكم بالخير و البركات .


ثانياً : اخواني الكرام .. انا خلاص من جد قرفت من هالموضوع .... انا قاعد اصمم بالفوتوشوب و اشوف دروس لحد ما قرفت خلاص و ابي الحل ...

كل مرة اقرأ درس ... اما ما يكون كامل ... او الشخص الي يشرح الدرس يبلش يفوت بمواضيع مالها داعي و يضيع الدرس ..او اما ما يحط مثال على درسة .... يعني من الاخر بنجلط و السبب هالدروس الي على الانترنت

بصراحة ... انا الحين عندي تصميم بالفوتوشوب ... سويتة بناءً على درس عجبني جداً ...
و كان الهدف من الدرس تحويل الPDS فايل إلي HTML\CSS ولكن الاخ الي يشرح الدرس .. بمجرد انة خلص التصميم بالفوتوشوب .. انتقل مباشرة لاعداد ملف ال CSS و دون التطرق لقص التصميم و ما الذي حدث للتصميم بعد ذلك و كيف سوف يكون شكل الموقع بعد القص و هل يجب تعديل شيئ علية ....؟؟؟؟؟ كل هذا افتقدة الاخ الذي يقدم الشرح .. ولم يجب اي احد علية :(

فياريت اخواني احد يمد لي يد العون لو بطريقة مختلفة حتى .. ويقولي بعد ما اصمم الموقع بالفوتوشوب شنو اسوي فية ....؟؟؟؟؟؟؟؟؟

رجاءً ....

و لو يبي ارفقلة التصمييم تيطبق علية و نختصر الوقت فانا حاضر ...

ولكم مني جزيل الشكر ...

كل تصميم له طريقته بالقص بالفوتوشوب
لذا من الأفضل انك تراسل صاحب التصميم وتشوفه اذا يقدر يشرحلك طريقة قصّه ..

او انك ترفق التصميم بالمرفقات وان شاء الله احد يقدر يساعدك بالقص!


كمعلومه:
للقص نستخدم أداة slice الموجوده بالفوتوشوب..

شكراً لك اخي الكريم M. Al-Dhafeeri

ونعم كل تصميم لة قصة ... و لكن على اي اساس يتم القص بالتصميم ؟؟؟؟ يعني ليش اوقات يروح 1 بيكسل من هنا او من هناك من الصورة و على اي اساس اقول هاي الصورة رح استخدمها بعد القص وهاي لا ؟؟؟ :( وسوف تجد بالمرفقات تصميم بسيط قمت بعملة ليكي يقوم احد الاخوان بالشرح علية لي :(

و عليكم السلام و رحمة الله و بركاته.
اللهم تقبل ما اكتبه خالصاً لوجهك الكريم .
اخوي القص في اغلب الاوقات تفقد فيه اغلب اجزاء التصميم تبقي فقط على اجزاء بسيطة تخدم العموم بمعنى اخر خلفية لديك بمقاس 1000*700 سنأخذ منها فقط 3 بكسل في العرض و الطول على حسب التصميم و يمكنك اخذه كاملا(1000) ، اذن فقدنا 697 بكسل من العرض لماذا؟ لاننا سنكرر الخلفية بالـ CSS .
سنبقي فقط على الاجزاء التي لا يمكننا الحصول عليها الا من طريق الصور مثل الشعار و الكتابة و ما الى ذلك :)
مرفق التصميم بعد التقطيع باداة التقطيع (Slice) رغم ان التصميم غير جيدة البتة ! افتح و تصفح اجزاء التقطيع و اضغط على Slice Opition Slice حتى تجد اسم كل قطعة لتعرف مكانها في التصميم :)

شكرً اخي الكريم على سرعة الرد

و هذا التصميم فقط لكي اعرف منة على اي اساس يتم القص ( و هو غير جيد برايك من اي ناحية ؟؟ من ناحية القص مثلا او ماذا ؟؟ ) فهو فقط للتجربة

جاري تحميل الملف و رؤية التقطيع .

اخي الكريم .. قمت برؤية التقطيع ... و هناك ما لم اعرفة .. انة لماذا لم يتم تقطيع الازرار مثلا ؟؟؟؟
وبالنسبة للخلفية الزرقاء .. فانت لم تقم باخذ شيئ منها ...فلماذا ؟

انا وضعت لك التقطيع بصفة عامة و لك ان تقطع الازرار فلسنا هنا لتقطيعها لتركيبها لذلك قطعناها فقط للدراسة.
الخلفية الزرقاء اخذت منها راجع اقصى جهة اليسار ستجد هناك تقطيع :)

من وجهة نظري البسيطة

تعامل مع التصميم بخيالك , وليس بخيال شارح الدرس , بمعنى

عليك أن تفهم أن هناك أجزاء من التصميم لابد لنا أن نقصها , مثل ( اللوجو ) في الغالب يكون عبارة عن صورة بإمتداد Png , وهناك أجزاء من التصميم ليس هناك داعي لقصها , مثل لون المحتوى أو Content فلماذا نقص صورة للمحتوى إذا كانت عبارة عن لون فقط ؟!
نستطيع أن نفعل ذلك عن طريق أوامر الـ CSS ونغير اللون كما يحلو لنا ..

مثال آخر , لو كانت خلفية التصميم بها تدرج أو كانت مصممة بنمط الـ Pattern فعليك أن تأخذ صورة لهذا التدرج أو الباترن , لكن لو كانت الخلفية عبارة عن لون أحادي كأن تكون سوداء مثلًا , لا نحتاج لأخذ صورة من الخلفية إنما نغيرها عن طريق الـ CSS

المساحات , 1 بكسل , 10 بكسل , كل تلك التقديرات تخضع للتصميم
فمثلًا لو فرضنا أن الخلفية متدرجة , عندها لابد للمصمم أن يقطع جزء من هذا التدرج , ويجعلها بمقاس يجعل ظهور التدرج واضح , فلا يزيد ولا ينقص , وهذه مهارة تكتسبها بمرور الوقت ..

وقبل أن أختم , عليك أن تسأل نفسك سؤالًا محددًا :

هل هذا الجزء من التصميم أستطيع أن أستبدله بخصائص الـ CSS أم لا ؟
فلو كانت الإجابة نعم , بالتالي فأنت لا تحتاج لقص تلك الصورة , والعكس صحيح ..

عليك بتعلم الـ CSS , وخذ الأمور ببساطة

أتمنى أن أكون أفدتك ولو بالقليل
دمت بود