هذا Adobe Photoshop يظهر البرنامج التعليمي ومناقشة كيفية استخدام Photoshop لتصميم موقع على شبكة الإنترنت حيث يتم تصدير html وصورة شرائح. هذا في وقت لاحق يمكن أن يقدموا إلى html مثل برنامج تحرير Adobe Dreamweaver. هذا هو Adobe Photoshop تصميم المواقع الإلكترونية تعليمي يبين كيفية إنشاء صفحة ويب كاملة في مباشرة Photoshop.
ابراهام chaffin creativecow.net, Cambria, كاليفورنيا في الولايات المتحدة الأمريكية.
هناك العديد من الطرق المختلفة لنهج تصميم موقع على شبكة الإنترنت. بعض تختار التصميم في الامر كله Dreamweaver, أو أن تقدم سريع رسم على الورق ، ثم بناء الموقع, بينما يفضل البعض الاخر وهو نهج البيانية وتصميم واستخدام Photoshop كما تصميم أداة. تهيئة موقعك باعتبارها Photoshop الملف الأول يجعل من إنشاء موقعك أسهل بكثير في وقت لاحق لأسباب مختلفة.
بداية أي مفهوم التصميم هو جيد للحصول على الإلهام من شيء يمكن أن نرى بالفعل. مثل الرسام يحصل على الإلهام من العالم من حولهم, مصمم ويب وسوف تحصل على الإلهام من ما يرونه. أحيانا هو موجود في الموقع, موقع قوالب, أو من صورة, الرسوم البيانية, أو شعار.
إضافة إلى إلهام جيد هو الاعتراف جمهورك المستهدف وتصميم نحو ما مرتاحون. الشكل والأسلوب وينبغي في بعض مطابق لما جمهورك بالفعل إلى استخدام. دقة الشاشة كما يجب النظر فيها عند تصميم موقع على شبكة الإنترنت. عرض الصفحة الأولى ، وحظيرة صفحتك هامة لنجاح موقعك. (حظيرة هو المجال الخاص بك ويرى المشاهد قبل أن انتقل إلى أسفل الصفحة.(في الوقت نفسه إلا أكبر شاشة قرارات قد تجعل عملك أسهل انك الاستغناء عن جزء من جمهورك. معظم مستخدمي الانترنت اليوم قرارات استخدام شاشة أكبر من أي وقت مضى ، والمستقبل في مواقع الإنترنت التي بنيت للقرارات الشاشة الصغيرة ستصبح أقل من عامل ، ولكن في الوقت الراهن لا يزال يجب النظر.
ومن الممكن أيضا لموقعك أن يكون العرض مرنا بحيث يتوسع والعقود المبرمة على أساس حجم نافذة المستخدمين, هذا هو الأمثل عند محاولة تهيئة الموقع الذي يستوعب الجميع. الموقع مصمم لاستيعاب حجم نافذة على الأقل 750 بكسل هو الأمثل. الحد الأدنى من القرار التي يستخدمها معظم الناس اليوم هي 800 × 600.
خطوات إنشاء موقع ويب الخاص بك باستخدام Photoshop نكون:
1. الاستخدام Photoshop نتطلع لتصميم وتخطيط الموقع كنت ترغب في.
2. شريحة في الصورة Photoshop, تصدير شرائح الصور أو باعتبارها html. فهم html الشكل يساعد كثيرا لتفسير كيفية شريحة الصورة للدخول html.
3. خلق html نموذج لمواكبة Photoshop الموقع تصميم وإسقاط شرائح الصور أو استخدامها Dreamweaver تعديل html ملف Photoshop خلقت من حسابك PSD شرائح.
تصميم موقع في هذا البرنامج التعليمي وسيبنى من صورة بيسي في المراعي.
لهذا ينبغي أن يكون سعيدا موقع س =
خلق رأس بيانية
الجزء الأول من تصميم موقع Photoshop يخلق رأس البياني لموقعك. العنوان الرئيسي هو الرسوم البيانية جزء من موقعك سيتبين أن الأولى وستكون مركزا لمجمل الشكل والمظهر موقعك. الانتهاء من الحصول على رأس بيانية هنا.
الخطوات اللازمة لمتابعة:
1. الحق اضغط هنا لانقاذ صورة. حفظ الصورة في مجلد جديد.
2. فتح الملف الذي تم تنزيله في Photoshop.
3. اقتصاص الصورة إلى 745 × 320 مع شعار البقر في الجانب الايمن من الصورة. لذلك اختر أداة مستطيلة سرادق (م), ثم في إطار نمط ثابت المنسدلة اختيار الحجم. في مقصف 745 للعرض و 320 مقصف للذروة. الموقف الخاص بك لإنشاء حسابك سرادق رأس المحاصيل والصورة (صورة قائمة المحاصيل).
4. إنشاء 10 بكسل ريشة صغيرة في اعلى الصورة. اختر أداة التدرج (ز), اضغط على التدرج في أعلى نافذة أداة التدرج, تحديد بداية ونهاية لألوان بيضاء, حدد بداية التعتيم على 0 ٪ وإنهاء التعتيم على 100 ٪. جعل طبقة جديدة واسحب وتهيئة الطريق المنحدر في قمة عقد انتقال لجعل الطريق المنحدر على التوالي.
5. التخفيف من الرسوم من خلال خلق فوق منحدر آخر في الوقت الذي تبدأ الصورة في اسفل والبرق نحو الأعلى (اجراء تغيير للحفاظ على منحدر على التوالي). نقطة النهاية في الطريق المنحدر وينبغي أن نحو 300 نقطة فوق لإعطاء صورة جميلة لالضباب بيانية. هذا يعطي مظهر أكثر إشراقا في يوم البقر في مزرعة.
6. في النهاية سنكون الى التخفيف من رأس بيانية أكثر من ذلك عن طريق تهيئة الطريق المنحدر العمودي آخر في الاتجاه المعاكس على النحو السابق. بداية ينبغي أن تكون نقطة حتى رأس البقرة أسفل شعار وينبغي 1 بكسل فوق قاع الجرافيك.
7. إنقاذ رأس البياني في مجلد حيث انك ستخلق موقعك باستخدام الشبكة العالمية لإنقاذ (فقرة بديلة تحول + + + السيطرة). انقاذ بوصفها jpg, الأمثل, نحو 70 في الجودة.
رأس البياني الخاص بك الآن تم إنشاء. هذا الرسم الذي يمكن استخدامه بطرق مختلفة في موقع القالب. استخدامها في الوقت انها واسعة النطاق والملاحة والانتهاء من الهيئة النص حولها, أو انخفاض في حجم ومجموعة إلى أكثر حداثة تصميم قالب تصميم.
تصميم موقع على شبكة الانترنت في تصميم Photoshop
تصميم موقع الويب الخاص بك ينبغي أن يكون على الأقل في ثلاثة أجزاء منفصلة ، التي تشمل عناصر محددة:
1. رأس
شعار الشركة
رسم بياني لواء
وصلات / أزرار للمنزل, حول, وصفحة الاتصال
2. جسم
مضمون النص للمنطقة على الصفحة
صور أو رسومات تدرج مع محتوى
3. الذيل
معلومات حقوق النشر
وصلات لسياسة / شروط الاستخدام, والرجوع إلى أعلى الربط
عند إنشاء مخطط التصميم Photoshop مما لا شك فيه أن يترك مجالا لمزيد من الملاحة, النص, وموقع التوسع في المستقبل ، أو قد تجد نفسك بحاجة إلى إعادة تصميم موقعك تماما لأنك لم تترك مجالا لمزيد من الروابط لصفحات التصميم الخاص بك. الخطوات التالية هي التي استخدمت لانشاء مخطط ل Photoshop تصميم الموقع الذي يمكن أن التحميل هنا.
الخطوات اللازمة لمتابعة:
1. إنشاء لجنة جديدة PSD 745 ملف × 600 مقصف مقصف وحفظه كما نسق.psd
2. مكان رأس البياني في الوثيقة. (فتح ملف (g_header.Jpg), اختيار (السيطرة + أ), نسخة (السيطرة + ج), تفعيل نسق.PSD نافذة, لصق (السيطرة + ت).)
3. استخدام أداة التحرك (ت) لتحريك رأس إلى الأعلى للتخطيط لإجراء تحول ندعه المفاجئة في مكانه على رأس.
4. فتح شعار الشركة, نسخ ولصق الى التصميم الخاص بك.
5. تحويل شعار (السيطرة + ر) ونقلها الى أعلى الزاوية اليسرى للموقع تصميم.
6. باستخدام أداة الأفقي نوع (ر) خلق بعض النصوص في السماء الروابط بين البلدين على أعلى العلامات من الدليل. اكتب كلمة "الوطن", 4 مساحات, "اتصالات", 4 أماكن أخرى, وبعد ذلك "عن". النص ينبغي أن يكون نحو 12 قرشا, الخط arial, استخدام الألوان # a6ff94 لمتعة ضوء أخضر اللون.
7. يعطي النص dropshadow (طبقة طبقة أسلوب dropshadow) مع مسافة (2) ، وحجمها 3.
8. موقف نص باستخدام أداة التحرك ومفاتيح الأسهم على نحو مناسب المقبل أعلى يسار شعار.
9. بقرة صغيرة تحت شعار سنقوم خلق بعض أكبر الملاحة / صورة صلات:
باستخدام أداة الأفقي نوع (ر) من نوع "الصفحة 1 الصفحة 2 الصفحة 3 الصفحة 4" باستخدام arial, 17 قرشا مع الخط الاسود النص. وضع حوالي 4 أو 5 فراغات بين الكلمات لاعطاء بعض الأزرار الفضاء.
خلق طبقة جديدة
واسحبها أدناه نص انك خلقت
مع أداة مستطيلة سرادق (م) اختيار المنطقة فقط حول الأكبر للملاحة.
اختر أداة دلو الدهان (ز) وملء اختيار منطقة جديدة خالية من طبقة مع (# a6ff94) اللون الاخضر.
هذه طبقة تبدو مثل زر عن طريق الانتقال إلى القائمة طبقة طبقة أسلوب شطبة وزخرف. استخدام الإعدادات الافتراضية عن طريق الضغط على موافق
باستخدام بيانات عمود خيمة واحدة أداة حذف عمود بكسل بين كل كلمة في طبقة صلبة خلفية خضراء انك خلقت. هذا تفريق شطبة وجعل كل كلمة تبدو وكأنها منفصلة زر. قد تحتاج إلى تكبير للحصول على حق في ما بين الكلمات.
8. ازدواجية الزر الأخضر الطبقة جره على زر الطبقة الجديدة أو الذهاب إلى قائمة طبقة طبقة مزدوجة.
9. اختر الزر الأخضر أسفل طبقة وإضافة إلى طمس الاقتراح مع طبقة على بعد حوالي 150 بكسل من خلال الذهاب الى قائمة فلتر طمس Motion طمس.
10. تحرك واضح لطبقة بانخفاض نحو 10 بكسل وأقل من الابهام 20 ٪. هذا يعطي خط دقيق في ظل قيادتكم للمساعدة على أزرار تقسيم أعلى من محتوى.
12. خلق طبقة جديدة وراء النص على حق المؤلف التي ستصبح الخلفية الكامنة وراء النص وذيلها, تأكد من اختيار طبقة.
13. تستخدم أداة مستطيلة سرادق (م) لاختيار منطقة عبر أسفل الصفحة ، ولكن فقط من أعلى قليلا من النص على حق المؤلف.
14. استخدام الطلاء دلو أداة (ز) وملء المنطقة الخضراء الزاهية (# a6ff94).
15. ريشة خارج الحافة الداخلية من خلال استخدام أسلوب توهج طبقة (طبقة من القائمة نمط الطبقة الداخلية وهج) حدد طريقة المزج إلى وضعها الطبيعي, اللون الأبيض (# ffffff) وحجمها 10 بيكسل.
لدينا الآن تصميم بسيط, متعة, في الموقع Photoshop مع رأس الصفحة وذيلها. في المساحة البيضاء بين رأس وذيل وسيكون كل مضمون النص والصور التي تملأ الفعلية في الموقع.
تشريح في صور Photoshop لويب
الآن بعد أن قمنا بتصميم موقع بسيط مع Photoshop سنقوم الى قطعة قطعة وتصدير القطع باعتبارها html الملفات التي يمكن استخدامها في وقت لاحق وتعديلها Dreamweaver. تشريح عند تصميم موقع الويب الخاص بك أن نتذكر أن لكل شريحة ستصبح مستقلة مكونة من جدول وصورة ذلك في محاولة للحفاظ على شرائح قليلة وبسيطة قدر الإمكان. تأكد من وبدء وإنهاء شرائح خارج تصميم كلما أمكن ذلك Photoshop لا خطأ واحد بكسل كنت قد أخطأت بوصفها شريحة. افتتاح موقع التصميم التي قطعناها على أنفسنا في وقت سابق, اختر أداة شريحة (ك) ودعنا نبدأ. (بدوره على التقاط أفضل النتائج -- وبالنظر إلى القائمة المفاجئة (السيطرة تحول + + ؛), مفاجئة للتأكد من طبقات تشغيل.(تنزيل شرائح PSD الملف هنا.
الخطوات اللازمة لمتابعة:
خلق شريحة واحدة نحو كامل الرسوم البيانية. بدء خارج البيانية والرسوم البيانية نهاية خارج. أقول هذا من شأنه أن يساعد Photoshop لا احد لخلق ما بكسل الرسومات أننا لا نريد.
شريحة الجرافيك ذيل الصفحة البداية والنهاية في الرمادي خارج نسق. السماح لالتقاط تجد الجزء العلوي من طبقة لك.
على حصة في رأس كل وسيلة في أعلى ابتداء من فوق البياني في الرمادي وتنتهي في أقل بقليل من أكبر الملاحة. لهذا ينبغي أن شريحة البقرة في اثنتين (لا يا! ). يجب عليك الآن 3 شرائح لرأس الجزء الخاص بك, المحتوى الخاص بك, والذيل الخاص بك.
حصة كل الأزرار, في محاولة للتأكد من انك لالتقاط نفس الموقف بالنسبة لكل زر حتى ذروة الأزرار هي نفسها. لأقل, أزرار أكبر يمكنك المفاجئة إلى قاع المحيط شريحة.
ملكك Photoshop وينبغي تصميم المواقع الإلكترونية وشرائح مستعدة الآن لإنقاذ لويب.
تصدير / إنقاذ Photoshop شرائح كصفحة ويب
في الإصدارات السابقة من Photoshop إنقاذ لشرائح الصور على الشبكة لا يمكن أن يتم إلا مع imageready ، ولكن كلها الان في صلب Adobe Photoshop CS3. ما يلي جزء من البرنامج التعليمي سوف يعرض لك كيفية انقاذ شرائح تصميم الموقع الذي قطعناه على أنفسنا في Photoshop باعتبارها html وما يرتبط بها من ملف الصور.
الخطوات اللازمة لمتابعة:
مع شرائح الجرافيك مفتوحة اختيار قائمة الملفات باستثناء أجهزة الشبكة & (فقرة بديلة تحول + + + السيطرة). وبذلك يرتفع حتى ينقذ لأجهزة الشبكة & النافذة.
تحت مسبقا المنسدلة اختيار jpeg عالية للجودة ونوع الملف. (وهذا هو مجرد تفضيل.)
انقر على السهم إلى أقصى القائمة على الانفتاح الفرعية القائمة وانقر على تحرير إعدادات الانتاج...
لن أخوض في التفاصيل بشأن الانتاج تادادعإ هنا. اختيار الإعدادات الافتراضية من إعدادات المنسدلة. استخدام السابق والمقبل للنظر في جميع الإعدادات.
انقر فوق موافق ثم احفظ. تأكد انك إنقاذ في مكان يمكنك العثور بسهولة.
باستثناء ما تختار نوع: html والصور (*.html (
إعدادات: الإعدادات الافتراضية
شرائح: جميع شرائح
انقر على حفظ
تهانينا لك الآن بنجاح مع تصميم موقع على شبكة الإنترنت Photoshop, شرائح عليه, ثم نجحت في تصديرها بوصفها html ملف! هناك بعض التعديلات البسيطة التي تحتاج إلى أن يتم ذلك ولكن قبل وضع يمكن استخدامها بشكل كامل صفحة ويب أو موقع القالب ، بل سأترك لآخر تعليمي.
الآن بعد أن قمنا بتصميم موقع بسيط مع Photoshop سنقوم الى قطعة قطعة وتصدير القطع باعتبارها html الملفات التي يمكن استخدامها في وقت لاحق وتعديلها Dreamweaver. تشريح عند تصميم موقع الويب الخاص بك أن نتذكر أن لكل شريحة ستصبح مستقلة مكونة من جدول وصورة ذلك في محاولة للحفاظ على شرائح قليلة وبسيطة قدر الإمكان. تأكد من وبدء وإنهاء شرائح خارج تصميم كلما أمكن ذلك Photoshop لا خطأ واحد بكسل كنت قد أخطأت بوصفها شريحة. افتتاح موقع التصميم التي قطعناها على أنفسنا في وقت سابق, اختر أداة شريحة (ك) ودعنا نبدأ. (بدوره على التقاط أفضل النتائج -- وبالنظر إلى القائمة المفاجئة (السيطرة تحول + + ؛), مفاجئة للتأكد من طبقات تشغيل.(تنزيل شرائح PSD الملف هنا.
خلق بعض النصوص في السماء الروابط بين البلدين على أعلى العلامات من الدليل. اكتب كلمة "الوطن", 4 مساحات, "اتصالات", 4 أماكن أخرى, وبعد ذلك "عن". النص ينبغي أن يكون نحو 12 قرشا, الخط arial, استخدام الألوان # a6ff94 لمتعة ضوء أخضر اللون.
واسحبها أدناه نص انك خلقت
