نصائح للحصول على تصميم ويب من المصور في المستعرض

السيناريو: شخص يد لك وثيقة Illustrator تخطيط ويب آخر وهو عملك لتحويله إلى عمل HTML و CSS. دعونا نلقي نظرة كيف يمكنك أن تفعل ذلك.

ملاحظة: الهدف من هذا البرنامج التعليمي ليس تماما إعادة التصميم للاستخدام على ويب. بدلاً من ذلك، نحن ذاهبون لاستخدامها لاستكشاف مسارات العمل والميزات داخل المصور الذي يساعدنا على القيام بذلك.

الملف المصور

لنبدأ بإلقاء نظرة على الوثيقة المذكورة:

تخطيط لصفحة 404؛ صفحة والذي يخبر المستخدمين أيا كان أنهم يبحثون عن عدم العثور على وأنه ينبغي لها أن تحاول ربما شيء آخر. يمكننا أن نرى عنوان، وبعض الفقرات التعليمية، ونموذج بحث والزر، بالإضافة إلى بعض الأزرار مع تلميحات الأدوات في أسفل جداً.

كل شيء يبدو أن تعوم في وسط الصفحة، أفقياً وعمودياً. أنها خلفية صفراء وبعض النبرات الدافئة والظلال هنا وهناك. أين نبدأ؟

هل من السهل!

لن نذهب إلى إعادة اختراع العجلة لهذا، دعونا نجعل هذا سهلة بقدر الإمكان على أنفسنا. لن المصور لإخراج مجموعة مرتبة من HTML و CSS وجافا سكريبت لهذا، ولا أننا على وشك أن نضيع وقتنا في بناء كل شيء من الصفر وحتى نذهب والاستيلاء على نسخة Bootstrap إعطاء هذا المشروع بدء.

أنا تحميل Bootstrap، جردت بعض ملفات CSS والخط لا نحتاج، ثم إضافة ملف index.html استناداً إلى قالب غلاف مارك أوتو. أربع دقائق من النقر فوق الماوس، وقد نفسي صفحة أساسية التي تشبه تقريبا ما نحن عليه بعد.

ملفات المصدر الاستمرار من هذه النقطة متوفرة في الريبو GitHub، في المجلد 1-نقطة الانطلاق.

إضافة العلامات

وسيكون الخطوة المنطقية التالية لإضافة العلامات الهيكلية لدينا index.html (مرة أخرى، لن المصور للقيام بذلك بالنسبة لنا). لدينا بالفعل حاوية الانحياز مركزياً، div مع فئات الغلاف الداخلي:

1

<div class="inner cover">

2

    <h1 class="cover-heading">404</h1>

3

    <p class="lead">This is the base from which we'll work. All fluff has been stripped out.</p>

4

</div>

دعونا نضيف بعض القطع الإضافية ضمن ذلك:

1

<div class="inner cover">

2

3

    <h1>Error</h1>

4

    <h2>404</h2>

5

    <p>Sorry, the page you were looking for doesn't exist</p>

6

    <p>Try searching for the page here:</p>

7

8

    <!-- more form markup available http://getbootstrap.com/css/#forms -->            

9

    <form class="form-inline form-search" role="form">

10

        <div class="form-group">

11

            <label class="sr-only" for="searchInput">Search</label>

12

            <input type="search" class="form-control" id="searchInput">

13

        </div>

14

        <button type="submit" class="btn btn-default">Search</button>

15

    </form>

16

17

    <p>Or</p>

18

19

    <!-- buttons -->

20

    <a href="#" class="btn btn-primary">back</a>			

21

    <a href="#" class="btn btn-primary">home</a>			

22

    <a href="#" class="btn btn-primary">contact us</a>

23

24

</div>

وأضاف لدينا علامات العنوان<h1>و<h2>، بعض الفقرات، وبعض العلامات النموذج Bootstrap نموذجية (يمكنك الاستيلاء على المزيد من الأمثلة من مستندات Bootstrap). وقد الشكل فئة من النموذج-مضمنة، فئة Bootstrap أصلي الذي يضع لدينا عناصر النموذج على طول خط واحد.</h2></h1>

وأخيراً، الحق في النهاية، سترى المراسي الثلاثة، مع جميع فئات btn و btn-الابتدائية. وهذه ستكون بمثابة لدينا الأزرار. هنا ما لدينا في هذه المرحلة:

عند هذه النقطة لقد فعلنا شيئا من حيث التصميم، لا خط واحد المغلق، ومع ذلك وبفضل Bootstrap لقد بنينا صفحتنا، جاهزة لتلميع فعالية.

دعونا الحصول على عمل تلميحات الأدوات

شيء آخر الذي Bootstrap سوف تساعدنا مع؛ تلميحات الأدوات. يمكنك قراءة المزيد حول مختلف الخيارات المتاحة لنا في مستندات Bootstrap، لكن الآن دعونا مجرد إضافة المكونات اللازمة لدينا إتش تي أم ال.

علينا أن نضيف إلى كل زر تلميح الطبقة إضافية المستخدمة لتحديد أي شيء الذي يحتاج تلميح الأدوات. نحن أيضا بحاجة إلى سمة عنوان الذي يملي علينا ما سوف تظهر في الواقع إطار تلميح الأداة:

1

<a href="#" class="btn btn-primary tip" title="back">back</a>

يحتوي الملف bootstrap.min.js الذي نحن كنت سحب فعلا في جميع جافا سكريبت اللازمة لتلميحات الأدوات. وفي الواقع، فقد الأحمال من ألعاب جافا سكريبت أخرى، كثير منها لا بل نحتاج، حتى في بيئة إنتاج، قد يكون من الحكمة أن تشمل فقط الأشياء التي نستخدمها. تلميحات الأدوات bootstrap يتم التقيد في، حيث أنها لا تعمل automagically، نحن بحاجة إلى تهيئة عليها. دعونا نفعل ذلك ضمن علامات البرنامج النصي في الجزء السفلي من الصفحة، أسفل حيث لقد طالبنا جافا سكريبت أخرى:

1

<script>

2

    $(function(){

3

        $('.tip').tooltip()

4

    });

5

</script>

القيام بذلك. الآن لدينا هذا:

الآن دعنا نجرب بعض الأنماط

وأضاف لقد ثالث المغلق لملف المشروع المسمى theme.css وأشار إلى أنه من المستند<head>. ولكن ما يمكننا إضافة إلى ورقة الأنماط؟</head>

1

<link href="css/theme.css" rel="stylesheet">

نحن في طريقنا للبدء مع الحاوية الرئيسية. حدد كائن حاوية في Illustrator وستلاحظ في لوحة الطبقات، هو سمي الرئيسية.

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

خصائص CSS

اذهب إلى نافذة > خصائص CSS للكشف عن لوحة تحمل نفس الاسم. تحديد الكائن الرئيسية لدينا هذا سوف يحتوي على كافة الأنماط ذات الصلة التي نحن يمكن لصقها مباشرة لدينا ورقة الأنماط. سترى أنه قد تم تطبيق هذه الأنماط على.main محدد، مثلما تم تعيين كائن لدينا.

المضي قدما ونسخ ما ترى، ثم لصقه مباشرة في الملف theme.css. من أجل هذه القواعد تنطبق على عنصر حاوية لدينا، سوف نحتاج إلى تغيير المحدد على ما نحن فعلا نستخدم (حفظ محدد.main قليلاً محفوفة بالمخاطر كما قد نجد هذا المستخدمة في أماكن أخرى في موقعنا الشامل). تغيير.main إلى-inner.cover، وأنت يجب أن تشاهد عنصر حاوية الخاص بك تشغيل صفراء ذهبية جميلة، مع تدوير زوايا وحتى ظل مربع، كل تطبيق مع الكريم عبر متصفح المغلق.

أبعاد المغلق

ستلاحظ أن لدينا قواعد CSS هنا لا تقم بتضمين أي عروض أو مرتفعات. وهذا أمر جيد؛ Bootstrap حد كبير رعاية كل ذلك، لذلك نحن حقاً فقط نبحث عن الأنماط الجمالية. بتغيير خيارات تصدير خصائص CSS ونحن يمكن أن يكون لدينا الأبعاد المضمنة هنا، ولكن سوف نترك لهم.

لدينا الحاوية قليلاً على نطاق واسع على الرغم من سبب الأنماط التي تم تطبيقها بالفعل، لذلك دعونا تجاوز تلك الأبعاد مع الاستعلام الوسائط التالية:

1

@media (min-width: 992px) {

2

3

    .masthead, .mastfoot, .cover-container {

4

		width: 400px;

5

	}

6

7

}

يؤدي هذا إلى تجاوز القواعد الموجودة في cover.css، تعطينا عرض 400px على الشاشات على الأقل 992px على نطاق واسع. 400px ليست بالضبط وفيا للتصميم، ولكن شخصيا أجد الأبعاد الحقيقية وحجم الخط صغير قليلاً، حتى أنا وأنا استخدم الفيتو ضد!

بينما نحن هنا، أريد فقط أن تغير الأنماط حتى يمكننا تطبيق الزوايا داخل هذا الاستعلام وسائل الإعلام أيضا. إزالتها من النظام الذي قمت بلصقه من المصور وتنطبق عليها مثل هذه بدلاً من ذلك:

1

@media (min-width: 992px) {

2

3

    .masthead, .mastfoot, .cover-container {

4

		width: 400px;

5

	}

6

7

	.inner.cover {

8

		border-radius : 10px;

9

		-moz-border-radius : 10px;

10

		-webkit-border-radius : 10px;

11

	}

12

13

}

الآن أن لدينا شيئا من هذا القبيل على شاشات كبيرة:

.. وهذا على الشاشات الصغيرة:

قياسات محددة

نحن كنت الإخلاص ليس بالضبط للأبعاد الدقيقة المستخدمة في وثيقة Illustrator، ولكن هذا ليس مشكلة؛ على شبكة الإنترنت هو السائل. لا يزال، يمكن استخدام حاوية لدينا بعض الحشو في الجزء السفلي، لذلك دعونا معرفة بالضبط كم لدينا تصميم المصور يقول أننا ينبغي أن نستخدم.

حدد أداة القياس في Illustrator (ستجد أنه باستخدام أداة الشافطة) واسحب المؤشر لقياس أي مجال للتصميم. يمكننا أن نرى أن الحشو نحن بعد هو 25px، لذلك دعونا تطبيق ذلك يدوياً على لدينا أنماط.

1

.inner.cover {

2

    padding-bottom: 25px;

الأنماط الأخرى

لدينا عدد كبير من الأنماط والكائنات للتعامل مع هنا، وإذا كانت تسمية كل شيء تماما كما ينبغي أن يكون، ونحن يمكن أن (من حيث المبدأ) إخراج كومة ضخمة من المغلق من المصور للتعامل مع كل ذلك. ومع ذلك، هناك بعض الاختلافات مع كائن التسمية هنا (تجنب تتطلب بعض إغلاق الاتصال مصمم/مطور) ونحن قد ينتهي مع بعض التعليمات البرمجية غير الضرورية التي لا نحتاج.

بدلاً من ذلك، العمل الخاص بك طريقة صبر من عنصر إلى عنصر، تحديد كل كائن وإخراج المغلق ذات الصلة. تبدأ الطباعة ودعونا نرى فقط جيدا كيف يفعل المصور.

الخطوط

واحد من أول الأشياء التي ستلاحظ أن يشمل المغلق لأي نوع الكائن: عائلة الخط: "بلا مفتوحة"؛

فتح بلا ليس خط نظام قياسي ولن يتم عرض في أي متصفح حيث لا يملك المستخدم تثبيته. ولذلك ستحتاج إلى أكثر من رئيس "الخطوط جوجل" والاستيلاء على الارتباط المغلق أن تسحبه إلى الصفحة من خلال سحر webfonts.

1

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

أزرار

كل ذهب جيدا إلى حد ما حتى الآن، ولكن ثم ضربنا الأزرار. زر البحث في الواقع ليست سيئة، لكن الأزرار الثلاثة أدناه لم تكن قد أعطيت أسماء الكائنات، حتى نرى ما يلي في نافذة خصائص CSS لدينا:

تم إنشاء أية تعليمات برمجية CSS. لإنشاء CSS لكائنات لم يكشف عن اسمه، اسم الكائن في لوحة الطبقات، أو تمكين الخيار '"توليد المغلق""الكائنات غير مسمى"' في مربع الحوار "خيارات تصدير المغلق".

المضي قدما في فتح الخيارات كما ناقشنا من قبل، ثم تأكد من كنت قد تحققت من توليد CSS "كائنات لم يكشف عن اسمه". وقد يكون البديل لإعطاء لدينا أزرار اسم، ولكن أما خيار ما يرام هنا.

الآن، مع جميع أزرار لدينا مختارة، يمكننا ضرب توليد CSS ويكون الإخراج الأنماط بالنسبة لنا. لسوء الحظ، سيتم إخراج المصور أنماط كاملة لكل كائن الفردية، حتى ولو أنها تشترك جميعا نفس القواعد. هذا ويبدو أن الحال حتى إذا كان علينا استخدام أنماط الرسوم المشتركة وأنماط الحرف، أنماط الفقرة، أو حتى إعطاء كافة الكائنات بنفس الاسم! مجال للتحسين، ولكن على الأقل يمكننا انتزاع الأنماط الشائعة وتطبيقها على كائنات متعددة يدوياً.

لقد نسخ الأنماط لزر البحث، ثم تطبيق ذلك على.btn،.btn:hover للتأكد من كافة الأنماط Bootstrap كانت الكتابة تأهيلاً مناسباً. أود أيضا أن أضيف حدود: لا شيء؛ للتخلص من Bootstrap بحدود زرقاء. دعونا نرى ما الذي يحصل لنا!

وهذا ليس سيئاً، ولكن طريقة عادلة قبالة مثالية. لم تلتزم ظلال النص (أنها ينقصها الشفافية)، التدرجات على الأزرار ليست صحيحة، وهم في عداد المفقودين ظلالها المربع تماما.

لماذا؟

وباختصار، تصدير "المغلق المصور" ليست حتى الآن جاهزة لهذا النوع من بنية معقدة (لكي نكون منصفين، أنها معقدة للغاية). دعونا ننظر في زر البحث أننا كنت تهدف إلى إعادة إنشاء:

أنها جميلة. ولكن إلقاء نظرة على كم التعبئات، والتدرجات والظلال قد توجهوا إلى بناء عليه:

أوتش. من المستغرب أن المصور قال رقم قد تركت حتى الحدود-دائرة نصف قطرها من المعادلة لأن الأمور أصبحت معقدة للغاية.

بدلاً من ذلك، أنا ذاهب لمجرد تطبيق بعض الأساليب البسيطة ويتجنب المغلق المعقدة (هذا البرنامج التعليمي حول المصور ماذا يمكن لنا بعد كل...) الأنماط.btn المعدلة تبدو مثل هذا:

1

.btn,

2

.btn:hover

3

{

4

    font-family : Open Sans;

5

    font-weight : bold;

6

    font-size : 14px;

7

    color : #AC4400;

8

    text-shadow : 0px 1px 0px rgba(255, 255, 255, 0.3);

9

10

    background : #FDDA2F;

11

    border-color: #FDDA2F;

12

13

    border-radius : 4px;

14

}

من حيث الكفاءة CSS هذا يترك جميع الكثير مما هو مرغوب فيه، ولكن نحن نعمل مع ما يعطي المصور لنا من أجل مظاهرة. سيكون من الحكمة أن أعود بعد ذلك وتنظيف المغلق، وربما حتى باستخدام أداة مثل كسلينت.

الرموز

ما لقد ولدت حتى الآن ليس سيئة، حيث أننا سوف تترك وحدها للآن. دعونا نحول أنظارنا إلى الرموز الزر. وهناك بضعة نهج يمكن أن نستخدم هنا:

تصدير الصور النقطية

عن طريق تحديد كل رسم، يمكنك إنشاء CSS في الكثير بنفس الطريقة التي يتعين علينا قبل. المصور سوف تختار للتصدير مسارات معقدة كملفات png، ثم استخدام هذه الصور كخلفيات للعناصر الخاصة بك.

سوف تحصل على مجموعة من الأصول استخدام:

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

1

.image

2

{

3

    background-image : url(image.png);

4

	background-repeat : no-repeat;

5

}

SVG

تفضيل بلدي، كمصمم ويب، سيكون للذهاب ل SVG في هذه الحالة، شيء وهو الحصول على المصور جيدة جداً في.

أولاً، حدد رمز، ثم نسخها إلى الحافظة بالطريقة المعتادة (command + C). البيانات أساسا لهذا الكائن متوفر الآن لتقوم لصقها في محرر نص (مذهلة). فتح ملف جديد في مشروع الويب الخاص بك والذي يطلق عليه "رمز-contact.svg" ولصق محتويات الحافظة في ذلك.

يمكنك الآن إضافة أن SVG بصورة مباشرة في ترميز index.html الخاص بك:

1

<a href="#" class="btn btn-primary tip" title="contact us">

2

    <img src="img/icon-contact.svg" alt="">

3

</a>

وهناك كل أنواع الطرق يمكنك تنفيذ SVG في صفحة ويب؛ عبر CSS، بتحويل XML إلى base64، لصقه في الخاص بك مضمنة ترميز، أولاً الاختيار هو لك (نلقي نظرة على ملفات SVG: "المصور من" على الويب للحصول على مزيد من المعلومات). نهجنا يعمل على ما يرام على الرغم من، على الأقل في المتصفحات الحديثة، حيث سنقوم العصا مع ذلك.

كرر هذه العملية للرموز الأخرى، و...

نحن فعلنا!

مع أكثر قليلاً من اللف (لقد أضيف بعض الحشو للعنصر form) يجب أن يكون شيئا يشبه هذا:

ليس رديئًا! أنها لا تعكس 100% الرسم المصور، ولكن النظر لقد اعتمدنا أساسا على أنماط الإنتاج بالمصور وأعتقد أننا يمكن أن يكون من دواعي سرور جداً. أي تحسينات إضافية سوف يجب أن تتم باليد، والمصور قد فعلت كل ما في وسعها بالنسبة لنا في هذه المرحلة.

هل لديك أي نصائح يمكن أن تساعد المصور مباشرة تحسين تخطيط ويب هذا؟ اسمحوا لنا أن نعرف في التعليقات!