إعادة جوجل + الصفحات باستخدام أدوبي فوتوشوب


    جوجل بلس المشجعين هناك نعلم جميعا ان غوغل + حصلت على إعادة تصميم يجعل من أجمل وأبسط للتنقل. نحن ذاهبون لإعادة تصميم كامل. تقليد تصميم هو وسيلة لتعلم أشياء جديدة وتطبيقها على المشاريع المستقبلية. ما للمبتدئين وسوف نتعلم من هذه هي الطريقة مفيدة أداة التحديد المباشر (A)، أداة القلم (P) وأداة الشكل (U) يمكن أن يكون في جعل تصميم الموقع في برنامج فوتوشوب.
    إعادة جوجل + الصفحات باستخدام أدوبي فوتوشوب
    هنا هو ما سوف يجعل، انقر على الصورة لمعاينة كاملة:

    الموارد اللازمة لهذا البرنامج التعليمي

    الخطوة 1: إعداد وثيقة

    كما نعلم جميعا مع إعادة تصميم + جوجل، وهناك مسافة كبيرة بيضاء على الجهة اليمنى التي يلتف محتوى، وهذا يتوقف على قرار من الشاشة الذي تستخدمه لتتمكن من مشاهدته. لهذا البرنامج التعليمي ونحن نعمل مع قرار 1366 768 س.
    بدلا من 1366px دعونا جعل وثيقة X 1400px 1300px في برنامج فوتوشوب.
    أداة حاكم مفيد جدا لهذا البرنامج التعليمي تأكد من أن يتم إيقاف الحكام والمرشدين في.
    • الحكام: CTRL + R
    • الأدلة: ; + CTRL
    أيضا شيء واحد مهم في استخدام أداة حاكم هو معلومات (الإعلام) لوحة. استخدام لوحة معلومات للاطلاع على المعلومات الحاكم في لوحة معلومات. تأكد هذا الفريق مرئيا على حق. إذا لا يظهر أنه يمكنك الوصول إلى هذا من خلال الذهاب الى ويندوز - معلومات.
    وكما ترون في تخطيط + غوغل وضعت في التنقل على الجانب الأيسر، ومحتوى والدردشه المفروضة على الحق. كما ذكرت سابقا، إذا كنت تعمل على دقة أعلى وسوف تكون هناك مساحة بيضاء كبيرة على الجانب الأيمن التفاف المحتوى. المجمع أبيض لديها هامش من 20px صندوق المحادثات. أخذ لقطة عن طريق الضغط على طباعة الشاشة على لوحة المفاتيح ولصقه في برنامج فوتوشوب ومحاولة لقياس عرض باستخدام أداة المسطرة (I).
    هنا هو نتيجة ما قمت بقياس. لا تنس أن تضيف مبادئ توجيهية في كل قياس.
    • Navigaiton: 100px
    • المحتوى: 1035px
    • الدردشه: 212px
    لخلفية ملء مع # f1f1f1.

    الخطوة 2: العمل على رأس الأعلى (وصلات، صور + الشعار، بحث الاخطار الشخصي، المنطقة)

    وصلات

    باستخدام أداة المستطيل (U) مع لون التعبئة # 2d2d2d إنشاء 100٪ من قبل شكل 30px.
    تطبيق هذا الخيار المزج:
    • شبح الهبوط: # 000000
    المقبل، وذلك باستخدام أداة النص (T) إضافة وصلات الأعلى ومتابعة تنسيق النص كما هو مبين في الصورة ادناه.
    • نشط لون: # الاتحاد الفرنسي
    • عادي الدولة: # BBBBBB
    كما كنت قد لاحظت، هناك رمز زائد والسهم قليلا لأسفل. القيام بذلك ببساطة عن طريق استخدام أداة القلم الرصاص (B). الرجوع إلى الصورة ادناه.

    صور + الشعار

    عن شعار + جوجل، ومجرد الاستيلاء على نسخة من الشعار الأصلي ووضعه 27px من اليسار.

    بحث بار

    باستخدام أداة المستطيل (U) إنشاء 512px بواسطة 57px 30px شكل من الشعار مع لون التعبئة # الاتحاد الفرنسي.
    تطبيق هذا الخيار المزج:
    • السكتة الدماغية: # d9d9d9
    وسوف يكون القادم على زر البحث. باستخدام أداة مستطيل مدور (U) إنشاء 70px 30px من شكل.
    تطبيق هذا الخيار المزج:
    • الانحدار تراكب: # 3079ed، # 4d90fe
    • السكتة الدماغية: # 3079ed
    دعونا خلق هذا رمز البحث. حدد البيضوي أداة (U) إنشاء 10px 10px بواسطة شكل وجعل لون التعبئة في لوحة الطبقات إلى 0٪.
    تطبيق هذا الخيار المزج:
    • السكتة الدماغية: # FFF
    حدد المقبل أداة المستطيل (U) وخلق 2px بواسطة 4px شكل مع لون التعبئة # الاتحاد الفرنسي. تناوب عليها الى 145 درجة، ووضعه كما هو موضح في لقطة الشاشة أدناه.

    الملف إعلام المنطقة

    يتم محاذاة منطقة الإعلام (أو ما تسمونه)، مع صندوق المحادثات. باستخدام أداة مستطيل مدور (U) مع دائرة نصف قطرها 2px خلق الشكل التالي مع الأحجام المطلوبة المذكورة أدناه. وسوف يكون كل شكل مسافة 15px.
    • 1 الشكل: 30px 30px من قبل
    • 2 الشكل: 74px 30px من قبل
    • 3 الشكل: 40px 40px من قبل
    كما يمكنك ان ترى الشكل الثاني الذي هو الاسهم لديه السهم في وسط الجانب الأيمن من الشكل. لخلق، وهذا نحن بحاجة إلى تعديل وإضافة نقاط ربط الشكل.
    للقيام بذلك يجب عليك:
    1. حدد قناع متجه للشكل على لوحة الطبقات. (يجب أن تشاهد خط رفيع أسود على شكل)
    2. حدد أداة التحديد التوجيه (A) وانقر على خط أسود.
    3. حدد أداة القلم (P). بمساعدة هذه الأداة يمكن أن نضيف الآن أو إزالة نقاط الربط. أيضا بمساعدة أداة التحديد المباشر (A) يمكننا المضي النقاط وتغيير شكل وشكل.
    4. إضافة هذه نقاط الربط باستخدام أداة القلم (P). المسافة من كل نقطة هي 5PX.
    5. باستخدام أداة التحديد المباشر (A) نقل نقطة الربط 5PX إلى اليمين. سحب نقطة (دائرة سوداء) قبل 1px إلى مرساة مرساة نقطة.
    تطبيق هذا الخيار المزج:
    • الانحدار تراكب: # ededed، # f7f7f7
    • السكتة الدماغية: # c6c6c6

    هناك لديك! نحن تعديل بنجاح وعلى غرار الشكل. علما أنه سوف يتم استخدام هذه الخطوة الكثير في هذا البرنامج التعليمي. وأنا لن المشي لكم من خلال كل شكل سنقوم خلق في وقت لاحق، لذلك فمن تحديا لي أن لك أن تفعل ذلك بنفسك.
    تعبئة الشكل مع النص باستخدام أداة النص (T) باستخدام هذا التنسيق.
    • ارييل 13pt العادية # 666666
    لرمز زائد استخدام أداة قلم الرصاص (B) 2px وللسهم لأسفل مكررة فقط واحد ونحن في وقت سابق من خلق وتغيير اللون إلى # 909090.

    الخطوة 3: العمل على الشريط الجانبي (زر مستراح، صندوق المحادثات)

    مستراح زر

    باستخدام أداة مستطيل مدور (U) إنشاء 212px 36px بواسطة شكل نصف قطرها 2px.
    تطبيق هذا الخيار المزج:
    • الانحدار تراكب: # f8f8f8، # FFFFFF
    • السكتة الدماغية: # d7d7d7

    القادم نحن بحاجة لخلق ذلك الرمز مستراح. وسيتم لون شكل 6d6d6d #، كما قلت، وأنا لن أخوض في التفاصيل، فقط اتبع الصورة ادناه لنرى أين أضع نقاط الربط.
    عند الانتهاء من ذلك، وخلق شكل آخر مع لون التعبئة # FFFFFF.
    الآن أن تنتهي ونحن مع هذه الأشكال. سنقوم استخدامه مرة أخرى في القيام الدردشه لذلك نحن بحاجة إلى جعل الشكل كما شكل مخصص. للقيام بذلك الحق، فوق الشكل باستخدام أداة التحديد المباشر (A) وانقر على تحديد شكل مخصص، للتأكد من تسميته بشكل مناسب. نفعل ذلك لكلا الأشكال. إذا كنا نريد لاستخدام هذا الشكل يمكن أن نجد أنه باستخدام أداة الشكل (U) سترى شكل من التمرير لأسفل إلى أسفل جدا من التحديد.
    إضافة أخيرا النص مستراح
    • ارييل 13pt العادية # 555555

    صندوق المحادثات

    وكما ترون في الصورة أعلاه في لوحة طبقات بلدي ويتم تنظيم كل شيء من قبل المجموعة. لقد بدأت من خلال خلق شكل باستخدام أداة المستطيل (U) مع لون التعبئة # الاتحاد الفرنسي، وذلك في شكل أتقدم بطلب لسكتة دماغية # d7d7d7.
    أنا القادم إضافة تلك الفواصل خط باستخدام أداة الخط (U). أول واحد هو البعد 70px من أعلى، واللون هو # d7d7d7. ثم والباقي هو الفاصل لكل شخص عبر الإنترنت أو أيا كان وضعهم. المسافة من كل الفاصل هو 42px، اللون # eeeeee، 194px العرض.
    .
    أنا القادم إضافة دردشة مع مربع. أنا خلق 200px 26px بواسطة شكل باستخدام أداة المستطيل (U) مع لون السكتة الدماغية نفسها وضعه على مسافة من مركز 7px المفرق. لرمز فقاعة دردشة كنت واحد ونحن إنشاؤها باستخدام أداة الشكل (U) وتغيير لون التعبئة ل# 909090. للاطلاع على النص تنسيق النص نفسه فعلنا في زر سهم.
    أنا القادم إضافة ص التمرير. أنا خلق 9px بواسطة شكل 226px باستخدام أداة الشكل (U) مع لون التعبئة # cbcbcb. على أعلى من ذلك أود أن أضيف خط على حافة كل ما عدا الجانب الأيمن باستخدام أداة الخط (U)، 1px، اللون # b6b6b6. يتم وضع شكل 1px من الجهة اليمنى.
    لكل صورة مصغرة الأحجام 32px 32px من قبل. المسافة من اسم من الصور المصغرة هو 25px.
    نص الصيغة:
    • ارييل 13pt العادية # 000000 (للحصول على اسمك)
    • ارييل 13pt العادية # 333333
    القادم هو الوضع. كل شخص على قائمتي على الانترنت لديها وضعا مختلفا. بعضها على الانترنت، وبعيدا، والخمول، مشغول. وأسرد أنماط الطبقة من كل رمز لمتابعة وخلق الخاصة بك.
    10px 10px الشكل من قبل.
    تطبيق هذا الخيار المزج:
    • الداخلية الظل: # 6cd04d
    • الانحدار تراكب: # 36a226، # 50b839
    • السكتة الدماغية: # 40a129



    تطبيق هذا الخيار المزج:
    • الداخلية الظل: # 5dc443
    • الانحدار تراكب: # 39a529، # 4db636
    • السكتة الدماغية: # 2b7c18
    لهذا الرمز فقط أن أضيف خطوط 2 باستخدام أداة الخط (U)، 1px، colro # FFFFFF
    تطبيق هذا الخيار المزج:
    • الداخلية الظل: # f2c40c
    • الانحدار تراكب: # e9a007، # eeb40a
    • السكتة الدماغية: # a17802
    تطبيق هذا الخيار المزج:
    • الداخلية الظل: # f6d60f
    • الانحدار تراكب: # e89d06، # edb20a
    • السكتة الدماغية: # 9c7402
    تطبيق هذا الخيار المزج:
    • الداخلية الظل: # dedede
    • الانحدار تراكب: # اعاا، # c1c1c1
    • السكتة الدماغية: # 8b8b8b
    وآخر شيء نضيف هو رمز المنسدلة. تكرار مجرد نسخة من رمز السهم إلى الأسفل. دون أن إنشاء طبقة 12px 12px بواسطة شكل باستخدام أداة الشكل البيضاوي (U) وتطبيق لون 1px # cdcdcd السكتة الدماغية.

    الخطوة 4: العمل على الملاحة الرئيسية

    أنا متأكد من أن لديك + G الأيقونات المجانية الآن، وضعه في المركز وفقا للشاشة هو مبين أعلاه. رموز لها 35px بينهما. أيضا، على مسافة من النص من رمز هو 10px.
    • Tahoma 11pt العادية # a7a7a7
    لمزيد من الرموز مجرد خلق 8px بواسطة شكل 8px باستخدام أداة البيضوي (U) ونسخ نمط طبقة من تلك الرموز.

    الخطوة 5: العمل على المحتويات الرئيسية (عنوان الصفحة، والأواني، علامات، الملف بيك الخ.)

    للبدء، وخلق قاعدة طبقة أو المجمع باستخدام أداة المستطيل (U). وسوف يكون عرض 1035px وتطبيق 1px # d7d7d7 السكتة الدماغية.

    صفحة العنوان

    إنشاء 20px التوجيهي من أعلى ومن اليسار. ثم، وذلك باستخدام أداة النص (T) إضافة عنوان الصفحة. الاستيلاء أيضا على نسخة من رمز صفحات من المجانية وتغيير حجمه إلى 15px 15px من قبل.
    • ارييل 20pt العادية # 222222

    زر

    إنشاء التوجيهي كما هو مبين في الصورة المبينة أعلاه. بعد استخدام أداة مدور مستطيل (U) مع دائرة نصف قطرها 3px، إنشاء 78px 30px بواسطة شكل مع لون التعبئة # 3d9300. تطبيق 1px # 29691d السكتة الدماغية. وأخيرا أنه وضع 30px من المبدأ التوجيهي.
    تسميته مع 11pt ارييل النص العادي # FFFFFF. خلق المقبل 13px 13px بواسطة شكل باستخدام أداة الشكل البيضاوي (U) جعل التعبئة في لوحة الطبقات إلى وتطبيق 2px # fffffff السكتة الدماغية على ذلك.

    راية

    لافتة إنشاء 890px 180px بواسطة شكل باستخدام أداة المستطيل (U)، وضعه تحت 20px ابتداء من زر. أخيرا إضافة 1 1px # d7d7d7 خط فوق الشكل الذي سوف يغطي المجمع بأكمله.

    صورة الملف الشخصي

    أولا تحتاج إلى إنشاء هذا الدليل كما هو مبين في الصورة ادناه.
    باستخدام أداة مستطيل مدور (U) مع نصف القطر نفسه، وخلق شكل من 260px 260px مع لون التعبئة # FFFFFF.
    تطبيق هذا الخيار المزج:
    • شبح الهبوط: # 000000
    • السكتة الدماغية: # CCCCCC
    خلق شكل آخر فوقه باستخدام أداة المستطيل (U) حجم سيكون 250px 250px بواسطة محاذاته على المركز.
    دون أن خلق شكل آخر من قبل 250px 90px الشكل باستخدام أداة مستطيل مدور (U) مع لون التعبئة # f9f9f9.
    تطبيق هذا الخيار المزج:
    • شبح الهبوط: # efefef
    • السكتة الدماغية: # CCCCCC
    استخدام أداة الخط (U) إنشاء تلك 1px # CCCCCC خطوط كما هو مبين في الصورة ادناه.
    لزر +1 أنا إنشاء شكل باستخدام أداة مدور مستطيل (U) مع نصف القطر نفسه وتعديل نقاط الربط ما عدا أسفل اليسار.
    للرمز +1 أنا إنشائه باستخدام أداة القلم (P) تشير فقط إلى الصورة ادناه. ثم، أنا تطبيق إسقاط الظل لون 1px # 621e12.
    القادم سوف ننشئ رمز سهم. لا تزال تستخدم أداة القلم (P) لهذا واحد، تشير فقط إلى الصورة ادناه. لون التعبئة للشكل هو # c1c1c1.
    تطبيق هذا الخيار المزج:
    • شبح الهبوط: # FFFFFF
    • الداخلية الظل: # 000000

    لرمز الارتباط واستخدمت أداة مستطيل مدور (U) ومزيج من 4 الأشكال. 1 2 الشكل 8px بواسطة اللون 8px # e4e4e4، واحد في الجزء السفلي، والآخر هو على رأس مع مسافة 2px. شكل 3 هو 4px بواسطة اللون 9px # f9f9f9 ووضعه في المركز. الشكل الأخير هو 2px بواسطة 5PX ووضعه في مركز مرة أخرى. المجموعة الأولى في مجلد وتناوب عليها 45 درجة. وأخيرا إضافة 1px بواسطة خط 6px باستخدام أداة الخط (U).
    باستخدام أداة النص (T) يضاف النص التالي كما هو مبين في الصورة ادناه.
    • ارييل 13pt العادية # 333333
    • ارييل بولد 16pt # 333333

    علامات التبويب

    إنشاء 264px 30px بواسطة شكل باستخدام أداة مدور مستطيل (U) مع لون التعبئة fdfdfd # وتطبيق 1px السكتة الدماغية dedede #.
    لعلامة التبويب النشطة إنشاء 63px 30px بواسطة شكل مع لون التعبئة # fcfcfc.
    تطبيق هذا الخيار المزج:
    • الداخلية الظل: # 000000
    • السكتة الدماغية: # cbcbcb
    ستضيف فاصل لعلامات التبويب غير النشطة باستخدام أداة سطر (U) يكون لون # dedede، 62px مسافة.
    إضافة أخيرا النص باستخدام أداة النص (T).
    • ارييل 13pt العادية # 000000 (نشط)
    • ارييل 13pt العادية # 333333

    المشاركات

    إنشاء 48px 48px بواسطة استخدام أداة مدور مستطيل هذا سيكون للموافقة المسبقة عن علم المصغرة. خلق القادم شكل كما هو مبين في الصورة ادناه الحجم الإجمالي هو 504px 584px من قبل.
    تطبيق هذا الخيار المزج:
    • شبح الهبوط: # 000000
    • السكتة الدماغية: # CCCCCC
    المقبل سنقوم بإضافة النص. تتبع الشكل كما هو مبين في الصورة ادناه.
    جعل الرمز +1 وتبادل أنا يخدع كما شكل العرف أو مجرد تكرار ببساطة وتطبيق نمط طبقة نفسه كما فعلنا على أيقونة سهم. وضعه كما هو مبين في الصورة ادناه.
    تحت شكل قاعدة إنشاء 493px 64px بواسطة شكل مع لون التعبئة # f8f8f8.
    تطبيق هذا الخيار المزج:
    • شبح الهبوط: # efefef
    • السكتة الدماغية: # d5d5d5
    لمربع النص تعليق إنشاء 460px 30px بواسطة شكل مع لون التعبئة # FFFFFF وتطبيق السكتة الدماغية 1px # dddddd. تسمية وأخيرا فإنه مع النص.

    الشريط الجانبي

    هذا الجزء من السهل جدا فقط اتبع الصورة ادناه.

    أخيرا ننتهي. أعرف أن هذا البرنامج التعليمي ليست مثيرة للاهتمام لأننا فقط نسخ صور + تصميم الصفحة. لكن النقطة من هذا البرنامج التعليمي هو ما نسخ جديدة أو دعونا نقول التصميم الذي تريد أن تريد أن تعرف كيف تم تصميمه على الفوتوشوب. آمل مبتدئين الذين تابعوا هذا البرنامج التعليمي يتعلم شيئا جديدا ونأمل أن تتمكن من تطبيقه لكم المشاريع المستقبلية. إذا كانت لديك أسئلة والتعليقات والاقتراحات مجرد قطرة أدناه. كما يرجى الإجابة على هذا السؤال "لو كنت من شأنه أن يجعل آخر تعليمي تصميم مواقع الإنترنت ما سيكون؟". شكرا للقراءة حتى في المرة القادمة. :)

    1 تعليقات

    أحدث أقدم