ટ્યુટોરિયલ: એડોબ ફોટોશોપ સાથે વેબ પૃષ્ઠને કેવી રીતે લેઆઉટ કરવું

વેબ પૃષ્ઠોને ડિઝાઇન કરવા અને કોડને સ્પર્શ કર્યા વિના અથવા સ્પર્શ કર્યા વિના એકદમ સરળ અને વિધેયાત્મક રીતે કાર્ય કરવા માટેના વિવિધ સાધનો છે. તેઓ અસંખ્ય છે, કાર્યક્રમો દ્વારા સૂચિત (એડોબ ડ્રીમવેવર ઉદાહરણ તરીકે) અથવા સીધા જ platનલાઇન પ્લેટફોર્મ દ્વારા જેમ કે વિક્સ. જો કે, વેબ ડિઝાઇનર માટે, મેન્યુઅલ પ્રક્રિયાઓ જાણવી જરૂરી છે. એચટીએમએલ 5 અને સીએસએસ એ વેબસાઇટ્સ અને લેન્ડિંગ પૃષ્ઠોના લેઆઉટ માટે મૂળભૂત આધારસ્તંભ છે.

જો કે, તમે અપેક્ષા કરતા વધુ વખત, તમારે ઇન્ડેસિગન અથવા જેવા એપ્લિકેશનો તરફ વળવું પડશે એડોબ ફોટોશોપ તમારા લેઆઉટ કામ પૂરક અને તેમને એક સંપૂર્ણ સમાપ્ત કરવા માટે. આજે આપણે આ વ્યાપક ટ્યુટોરિયલમાં જોઈશું કે આપણે એડોબ ફોટોશોપનો ઉપયોગ કરીને વેબ પૃષ્ઠને કેવી રીતે લેઆઉટ કરી શકીએ. આ પ્રથમ ભાગમાં અમે ફોટોશોપથી વિકસિત થનારા કામમાં રહીશું, જો કે ભવિષ્યના હપ્તામાં આપણે જોશું કે આ કાર્યને કાર્યરત બનાવવા માટે આપણે આ કાર્યને સીધા જ HTML કોડમાં કેવી રીતે લાગુ કરી શકીએ.

અમારા વાયરફ્રેમની ડિઝાઇનથી પ્રારંભ કરી રહ્યા છીએ

વેબ પૃષ્ઠના લેઆઉટ અને રચનાની શરૂઆત કરવા માટે, તે ખૂબ મહત્વનું છે કે આપણે મૂળભૂત તત્વો શું હશે તે નિર્ધારિત કરીને પ્રારંભ કરીએ, આ હાડપિંજર છે. આ સ્ટ્રક્ચર, બધી સામગ્રી (ભલે ટેક્સ્ચ્યુઅલ હોય કે મલ્ટિમીડિયા) ને પકડવા માટે મદદ કરશે. અમારા પૃષ્ઠને બનાવેલા દરેક વિભાગને નિર્ધારિત કરીને, અમે તેમના પર સંપૂર્ણ ચોકસાઈથી કામ કરી શકીએ છીએ અને શક્ય તેટલું સચોટ છે તેવું વિઝ્યુઅલ ડિઝાઇન પ્રદાન કરી શકીએ છીએ.

તે ખૂબ જ મહત્વપૂર્ણ છે કે અમે અમારી વેબસાઇટના પરિમાણોને ધ્યાનમાં લઈશું, જો તેની પાસે એક હશે બedક્સ્ડ અથવા પૂર્ણ-પહોળાઈ. બedક્સ્ડ વેબ પૃષ્ઠ નાના કન્ટેનરની અંદર હશે અને તેથી તેની આસપાસ એક જગ્યા દેખાશે. તેનાથી .લટું, એક સંપૂર્ણ પહોળાઈવાળી વેબ પૃષ્ઠની પુનrઉત્પાદન કરતી ડિવાઇસની આખી સ્ક્રીનને કબજે કરશે. એક અથવા અન્ય વચ્ચે પસંદગી, ફક્ત શૈલીયુક્ત પ્રશ્નોના જવાબ આપે છે અને તે પ્રોજેક્ટની જરૂરિયાતો પર પણ નિર્ભર રહેશે કે જેના પર આપણે કાર્ય કરી રહ્યા છીએ. અમે આ ઉદાહરણમાં બedક્સ્ડ મોડ સાથે કામ કરીશું જેથી તે બ્રાઉઝર દ્વારા પ્રદાન કરેલી બધી જગ્યા કબજે નહીં કરે.

અમારા વાયરફ્રેમ બનાવવા માટે, આપણે પ્રથમ એડોબ ફોટોશોપ એપ્લિકેશન દાખલ કરવી પડશે અને પરિમાણો શામેલ કરવા જોઈએ જે અમારું પૃષ્ઠ હોય તેવું છે. આ ઉદાહરણમાં અમારું પૃષ્ઠ 1280 પિક્સેલ્સ પહોળું હશે. જો કે, અંતિમ મુકામ અથવા તે ઉપકરણ પર આધાર રાખીને કદનો મુદ્દો બદલાઈ શકે છે કે જેના પર અમે અમારા પૃષ્ઠને ફરીથી ઉત્પન્ન કરવા માગીએ છીએ. તેમાં કોઈ શંકા નથી કે વેબ ડિઝાઇન કાર્યાત્મક અને કાર્યક્ષમ હોવા માટે, તે હોવી જ જોઈએ રિસ્પોન્સિવ અને તે બજારમાંના તમામ ઉપકરણોને અનુકૂળ હોવું આવશ્યક છે. જો કે, આ કિસ્સામાં આપણે પ્રોટોટાઇપ બનાવવા માટે કામ કરીશું જે આપણે ડેસ્કટ .પ કમ્પ્યુટર પર ફરીથી ઉત્પન્ન કરવા જઈ રહ્યા છીએ. તેમછતાં, જવાબદાર મુદ્દો આપણે પછીથી વ્યવહાર કરીશું, હમણાં માટે, અહીં આ ઉદાહરણમાં કામ કરવા માટે સ્ક્રીન પરિમાણોનું વંશક્રમ છે. ધ્યાનમાં રાખો કે આ કિસ્સામાં અમે એડોબ ફોટોશોપમાં ઉતરાણ પૃષ્ઠનું લેઆઉટ બનાવીશું અને પછી તેને HTML5 અને CSS3 પર સ્થાનાંતરિત કરીશું. આ નાનકડી પ્રેક્ટિસનો ઉદ્દેશ ફોટોશોપમાં બનાવેલ ડિઝાઇનને ઉપયોગી અને ઇન્ટરેક્ટિવ વેબ ડિઝાઇનમાં રૂપાંતરિત કરવાનો છે જે વપરાશકર્તાની હિલચાલને પ્રતિસાદ આપે છે.

મોબાઇલ ફોન્સ માટે માપન

આઇફોન 4 અને 4 એસ: 320 x 480

આઇફોન 5 અને 5 એસ: 320 x 568

આઇફોન 6: 375 x 667

આઇફોન 6+: 414 x 736

નેક્સસ 4: 384 x 598

નેક્સસ 5: 360 x 598

ગેલેક્સી એસ 3, એસ 4, એસ 5: 360 એક્સ 640

એચટીસી વન: 360 x 640

ગોળીઓ માપ

આઈપેડ બધા મોડેલો તેમજ આઈપેડ મીની: 1024 x 768

ગેલેક્સી ટ Tabબ 2 અને 3 (7.0 ઇંચ): 600 x 1024

ગેલેક્સી ટ Tabબ 2 અને 3 (10.1 ઇંચ): 800 x 1280

નેક્સસ 7: 603 x 966

નેક્સસ 10: 800 x 1280

માઇક્રોસ .ફ્ટ સર્ફેસ ડબલ્યુ 8 આરટી: 768 x 1366

માઇક્રોસ .ફ્ટ સર્ફેસ ડબલ્યુ 8 પ્રો: 720 x 1280

ડેસ્કટ .પ કમ્પ્યુટર્સ માટે માપન

નાના સ્ક્રીનો (ઉદાહરણ તરીકે નેટબુકમાં વપરાય છે): 1024 x 600

મધ્યમ સ્ક્રીનો: 1280 x 720/1280 x 800

મોટી સ્ક્રીનો: પહોળાઈ 1400 પિક્સેલ્સથી વધુ, ઉદાહરણ તરીકે 1400 x 900 અથવા 1600 x 1200.

અમારા વેબ મોકઅપમાં તત્વોનું વિતરણ અને વિભાગો શરૂ કરવા માટે, વાંચવા યોગ્ય અને સુસંગત સમાપ્ત થાય તે સુનિશ્ચિત કરવા માટે અમે પ્રમાણને ધ્યાનમાં લેવું ખૂબ જ મહત્વપૂર્ણ છે. તે આવશ્યક રહેશે કે તમે નિયમો અને માર્ગદર્શિકાઓના વિકલ્પોનો ઉપયોગ કરો જે તમને ટોચનાં મેનૂ વ્યૂમાં મળી શકે. પ્રમાણસર અને સચોટ રીતે કાર્ય કરવા માટે, ટકાવારીથી કામ કરવું શ્રેષ્ઠ છે. આપણે વ્યુની મેનુ પર ક્લિક કરીશું અને પછી ડિવિઝનની સ્થિતિને પસંદ કરવા «ન્યુ ગાઇડ option વિકલ્પ પર ક્લિક કરીશું. આ કિસ્સામાં અમે 25% પર ચાર vertભી વિભાગો બનાવીશું અને અમે ફૂટરમાં અમારી છબીઓ અને હેડરમાં અમારી લોગોની છબી મૂકવા સંદર્ભ તરીકે લઈશું.

તે ક્ષેત્રમાંના દરેકને નિયુક્ત કરવા માટે એક કોડ છે જે આપણો કબજો કરશે મોડેલ અને તેમાંના દરેકમાં જે ફંક્શન હશે. ઉદાહરણ તરીકે, તે ક્ષેત્ર સૂચવવા માટે કે જે છબીનો કબજો રહેશે, અમે એક પ્રકારનાં ક્રોસ સાથે લંબચોરસ બનાવીશું. તે દર્શાવવા માટે કે અમે કોઈ વિશિષ્ટ ક્ષેત્રમાં વિડિઓઝ શામેલ કરવા માંગીએ છીએ, અમે અમારા કન્ટેનરમાં નાટકનું પ્રતીક શામેલ કરીશું. આ પ્રથમ ઉદાહરણમાં અમે ફક્ત છબીઓ સાથે કામ કરવા જઈ રહ્યા છીએ, ઉપલા કેપ્ચરમાં તમે તે ક્ષેત્ર જોઈ શકો છો જે લોગો અમારી વેબસાઇટ પરથી.

આ આપણા અંતિમ પરિણામ હશે વાયરફ્રેમ. જેમ આપણે જોઈ શકીએ છીએ, તે છબીથી બનેલા હેડરમાં વહેંચાયેલું છે જેમાં લોગો મળશે અને જે સર્ચ બ onક્સ પર બે ટsબ્સ, સર્ચ એન્જિન અને ચાર બટનો સાથે હોમ પેજની લિંક તરીકે સેવા આપશે. આ ઉપરાંત, પહેલેથી જ શરીરની અંદર, અમે વિભાજન પટ્ટીથી બનેલા સાઇડ બાર અને કેટેગરીઓની શ્રેણીને શામેલ કરી છે જે અમારી વેબસાઇટ પરની સામગ્રીના પ્રકારનું વર્ગીકરણ કરે છે. નંબર સાથેનો બીજો વિભાગ જેમાં અમારી સાઇટ પર અસ્તિત્વમાં છે તે પ્રવેશોનો સમાવેશ થાય છે અને છેવટે અમારી સાઇટ પરના સૌથી પ્રતિનિધિ મેટા ટsગ્સ સાથેની સૂચિ.

સામગ્રી ક્ષેત્રમાં, જેનો સમાવેશ તે વિભાગ દ્વારા કરવામાં આવશે સ્વ-વ્યવસ્થાપિત સામગ્રી, અમે અમારા લેખોની સામગ્રી શોધીશું. આ કિસ્સામાં, બ્રેડક્રમ્સમાં અથવા બ્રેડ ક્રમ્બ્સ (જે અમારી વેબસાઇટની કાર્બનિક રચના દર્શાવે છે, લેખની મથાળા, મેટાડેટા, ટેક્સ્ટના મુખ્ય ભાગ તરીકેનો એક ફકરો, જેમાં એક છબી શામેલ છે.

ફૂટર તરીકે અમે ચાર છબીઓ શામેલ કરી છે જે અમારા પૃષ્ઠના અન્ય ક્ષેત્રોની લિંક તરીકે સેવા આપશે. અહીં આપણે લોગો અથવા અન્ય રસપ્રદ વિભાગો શામેલ કરી શકીએ છીએ. જો કે વાસ્તવિકતામાં, આ ક્ષેત્ર વધુ પસંદ કરશે પ્રીફેટર, કારણ કે ફૂટર પોતે જ ઉપયોગ નીતિ, કાનૂની સૂચના અને ક copyrightપિરાઇટથી થોડું આગળ જશે.

એકવાર અમે અમારા પૃષ્ઠની મૂળભૂત રચના અથવા હાડપિંજરને નિર્ધારિત કર્યા પછી, આપણે આગલા સ્તર પર જવું પડશે. આમાં અમારી વેબસાઇટના દરેક ક્ષેત્રની વાસ્તવિક રચના હશે. બીજા શબ્દોમાં કહીએ તો, અમે આ ક્ષેત્રમાંની દરેક સામગ્રીને "ભરવા" શરૂ કરીશું જે આખરે અમારી વેબસાઇટ પર દાખલ કરવામાં આવશે. અમે આગ્રહણીય છે કે વાયરફ્રેમ પર કામ કરતા પહેલા અમે આ તત્વોની રચના કરીશું નહીં, કારણ કે તે સંભવ છે કે જો આપણે આ ક્રમમાં તે કરીશું, તો આપણે પછી તેમના પ્રમાણને સુધારવાની જરૂર રહેશે. અમે અમારી છબીઓને વિકૃત કરવાનું જોખમ ચલાવીએ છીએ અને દરેક તત્વોની ડિઝાઇન ફરીથી કરવી, જે સમયનો બગાડ અથવા નીચલા ગુણવત્તાનું પરિણામ બની જશે.

આ કિસ્સામાં, અમારી વેબસાઇટની ડિઝાઇન અત્યંત સરળ હશે. આપણે તેનો ઉપયોગ કરીશું સામગ્રી ડિઝાઇન ઉપદેશો, કારણ કે અમે આ પ્રથાના ઉદાહરણ માટે Google લોગોનો ઉપયોગ કરીશું. મારે સ્પષ્ટ કરવું આવશ્યક છે કે આ ટ્યુટોરિયલનો હેતુ તકનીકી જ્ knowledgeાનને સમજાવવાનો છે, તેથી આ કિસ્સામાં સૌંદર્યલક્ષી પરિણામ અસંગત છે. જેમ તમે જોઈ શકો છો, ધીમે ધીમે અમે અમારી યોજનામાં અગાઉ નિર્ધારિત કરેલ તમામ ક્ષેત્રો સાથે જગ્યા ભરી રહ્યા છીએ. જો કે, અમે અંતિમ ક્ષણે એક નાનો ફેરફાર કર્યો. જેમ તમે નોંધ્યું હશે, અમે અમારા લોગોની સાઇઝમાં નોંધપાત્ર ઘટાડો કર્યો છે અને અમે નીચલા હેડર એરિયામાં ભાગલા વાક્ય શામેલ કર્યું છે જે ઉપલા મેનૂ સાથે સંપૂર્ણ રીતે જોડાય છે. આ કિસ્સામાં અમે સ્રોત બેંકના બટનો અને સામગ્રીનો ઉપયોગ કર્યો છે. ડિઝાઇનર્સ તરીકે અમે તેમને જાતે ડિઝાઇન કરી શકીએ છીએ, (ખાસ કરીને આ વિકલ્પની ભલામણ કરવામાં આવે છે જો આપણે તે બ્રાન્ડની છબી અથવા લોગો દ્વારા પ્રસ્તુત કરવામાં આવતા એક ખૂબ સમાન ટોનિક પ્રસ્તુત કરવા માંગતા હો).

તે મહત્વનું છે કે આપણે ધ્યાનમાં રાખવું જોઈએ કે આ ઉદાહરણ રજૂ કરવા માટે આપણે બે જુદા જુદા સ્તર પર કામ કરીશું. એક તરફ, અમે theબ્જેક્ટ્સ પર કામ કરીશું અને બીજી બાજુ વેબસાઇટનો દેખાવ. તે છે, એક તરફ અમારી વેબસાઇટના હાડપિંજરમાં અને બીજી બાજુ બધામાં ફ્લોટિંગ એલિમેન્ટ્સ કે જે આ હાડપિંજર ટેકો આપશે. તમે જોશો કે એવા ક્ષેત્રો છે કે જે તરતા બિલકુલ તરતા નથી, જેમ કે અમારી સાઇડબાર કબજે કરેલો વિસ્તાર, પ્રિફૂટર અથવા વિભાજન પટ્ટી કે જે શરીરમાંથી હેડરને વિભાજીત કરે છે.

સ્ટ્રક્ચર્સ 1, 2, 3 અને 4 એ ભાગ હશે પૃષ્ઠભૂમિ અમારી વેબસાઇટથી, તેથી તે એડોબ ફોટોશોપમાંથી નિકાસ કરવા માટે ખરેખર જરૂરી રહેશે નહીં, તેમ છતાં આપણે તે કરી શકીએ, તે જરૂરી નથી. જ્યારે તે આવે છે ફ્લેટ રંગો (ફ્લેટ ડિઝાઇન અને સામગ્રી ડિઝાઇનની આવશ્યક સુવિધાઓમાંની એક, તેઓ સીએસએસ સ્ટાઈલશીટનો ઉપયોગ કરીને કોડ દ્વારા સંપૂર્ણ રીતે લાગુ કરી શકાય છે). જો કે, બાકીના તત્વોને પછીથી દાખલ કરવા માટે અમારા HTML કોડમાં સાચવવા આવશ્યક છે. આ નાના આકૃતિમાં આપણે તે પૃષ્ઠોની પૃષ્ઠભૂમિ સાથે જોડાયેલા ક્ષેત્રોનું પુન .ઉત્પાદન પણ કર્યું છે જેથી અમારી સાઇટનો અંતિમ દેખાવ કેવો હશે તેનો અમને સ્પષ્ટ ખ્યાલ આવે.

જેમ તમે સમજી શકશો, એડોબ ફોટોશોપમાં આ યોજના બનાવવાનો હેતુ દરેક તત્વનું વાસ્તવિક પરિમાણ પ્રાપ્ત કરવાનું છે, અને દરેક તત્વની ગોઠવણી અને માળખું સ્પષ્ટ કરવું છે. અલબત્ત, પાઠ્ય સામગ્રીની પ્રક્રિયાના આ તબક્કામાં કોઈ સ્થાન નથી કારણ કે તે હોવું જ જોઈએ અમારા કોડ સંપાદક દ્વારા પૂરા પાડવામાં આવેલ. આપણે એ પણ નિર્દેશ કરવું આવશ્યક છે કે આ પ્રથામાં, અમે બટનો અને સ્થિર તત્વો સાથે કામ કરી રહ્યા છીએ, જોકે સામાન્ય રીતે આ બૂટસ્ટ્રેપ જેવા ફ્રેમવર્ક અથવા સીધા જક્વેરીથી લાગુ પડે છે.

એકવાર અમે પ્રત્યેક તત્વો બનાવ્યા જે આપણા વેબ પૃષ્ઠને બનાવશે, તે સમય તેમને નિકાસ કરવાનું શરૂ કરશે અને HTML પ્રોજેક્ટ ફોલ્ડરની અંદર સ્થિત છબીઓ ફોલ્ડરમાં તેમને સાચવવાનો સમય છે. તે મહત્વપૂર્ણ છે કે તમે તમારા વાયરફ્રેમમાંથી નિકાસ કરવા માટે ટેવાયેલા છો, કારણ કે સંભવત. સંભવ છે કે તમારે હાડપિંજર રૂપરેખાંકનના આધારે કેટલાક મૂળ તત્વોમાં ફેરફાર કરવાની જરૂર પડશે. (ઉદાહરણ તરીકે, આ કિસ્સામાં, અમે મૂળ બટનોનું કદ, લોગો અને નીચલા ક્ષેત્રની છબીઓ સહિતના મોટાભાગના તત્વો કે જે રચનાનો ભાગ છે તે બદલાયા છે).

તે મહત્વપૂર્ણ છે કે આપણે કોઈપણ વસ્તુઓને તેમના પાસેના પરિમાણો અને ચોક્કસ રીતે સાચવવા માટે સ્વતંત્ર રીતે સાચવવાનું શીખીશું. કોઈપણ ભૂલ, જો કે ન્યૂનતમ, તે બધા તત્વોને અસર કરી શકે છે જે તમારા વેબ પૃષ્ઠનો ભાગ છે. ધ્યાનમાં રાખો કે તે એક બીજાથી સંબંધિત હશે અને સંપૂર્ણ પરિમાણો હોવા આવશ્યક છે જેથી અંતિમ વેબમાં તેમને HTML થી દાખલ કરી શકાય. આ કિસ્સામાં, આપણે નીચે આપેલા તત્વોને સ્વતંત્ર રીતે કાપવા અને સાચવવાની જરૂર પડશે:

• અમારો લોગો.
• બધા બટનો (તે જે મુખ્ય મેનુનો ભાગ છે અને બાકીના)
• બધી છબીઓ.

અમે તેને ઘણી રીતે કરી શકીએ છીએ અને કદાચ તમને એક વિકલ્પ મળશે જે તમારા માટે વધુ અસરકારક છે. પરંતુ જો તમે પહેલીવાર આ પ્રકારનો લેઆઉટ બનાવવાનો પ્રયત્ન કરી રહ્યાં છો, તો હું ભલામણ કરું છું કે તમે નીચેની ટીપ્સને અનુસરો.

• પ્રથમ, તમારે તે ફોલ્ડર પર જવું આવશ્યક છે જ્યાં અમારી વાયરફ્રેમ સમાવે છે તે PSD ફાઇલ સ્થિત છે અને તમે નિકાસ કરવા જતા તત્વોની તેટલી વખત ડુપ્લિકેટ કરો. આ કિસ્સામાં અમે મૂળમાંથી 12 નકલો બનાવી છે અને તે જ ફોલ્ડરમાં તેમને સાચવી છે. આગળ, તમે દરેક નકલોનું નામ બદલો અને તેમાંથી દરેકને તેમાં સમાવિષ્ટ ઘટકનું નામ સોંપશો. અમારી 12 નકલોનું નામ બદલાશે: લોગો, મેનૂ બટન 1, મેનૂ બટન 2, સર્ચ બાર, અપર બટન 1, અપર બટન 2, અપર બટન 3 અને અપર બટન 4 બાકીના ચાર નામ બદલીને આમાં આવશે: ઈમેજ 1, ઇમેજ 2, છબી 3 અને છબી 4.
• એકવાર આ થઈ જાય પછી, અમે લોગો નામ સાથે ફાઇલ ખોલીશું.
• અમે અમારા લેયર પેલેટમાં જઈશું અને તે લેયર શોધીશું જેમાં આપણો લોગો છે. પછી આપણે દબાવશું સીટીઆરએલ / સીએમડી જ્યારે આપણે કહ્યું લેયરના થંબનેલ પર ક્લિક કરીએ. આ રીતે લોગો આપમેળે પસંદ કરવામાં આવશે.
• આગળનું પગલું ફોટોશોપને કહેવાનું છે કે અમે તે લોગોને ચોક્કસ રીતે કાપવા માગીએ છીએ. આ માટે આપણે ફક્ત કી અથવા આદેશમાંથી ક્રોપિંગ ટૂલ પર ક .લ કરવો પડશે C.
• એકવાર અમે આ કરી લો પછી, અમે કટની પુષ્ટિ કરવા માટે અમારા એન્ટર બટન પર ક્લિક કરીશું.
• હવે આપણે સેવ હાઉ ઉપર ક્લિક કરવા માટે ટોચની ફાઇલ મેનૂ પર જઈશું. અમે નામ પસંદ કરીશું, જે આ કિસ્સામાં «લોગો be હશે અને અમે તેને ફોર્મેટ સોંપીશું PNG, વેબ પર ઉચ્ચ ગુણવત્તાની offersફર કરે છે તે ફાઇલ હોવા માટે.
• અમે બધી નકલો અને તત્વો સાથે પ્રક્રિયાને પુનરાવર્તન કરીશું. જ્યારે તમે સુવ્યવસ્થિત છો, ત્યારે ખાતરી કરો કે અમારા પેલેટમાં બાકીના સ્તરો છે અદ્રશ્ય અથવા દૂર. આ રીતે આપણે દરેક તત્વને પારદર્શક પૃષ્ઠભૂમિથી બચાવી શકીએ છીએ.

આ કિસ્સામાં આપણે લેયર્સ પેલેટમાંથી અમારું મેનૂ બટન 2 પસંદ કરી રહ્યા છીએ. તમે સ્ક્રીનશોટમાં જોઈ શકો છો કે આપણા બટનની મર્યાદા આપમેળે કેવી રીતે પસંદ કરવામાં આવી છે.

એકવાર આપણે સી કીમાંથી ક્રોપિંગ ટૂલ પસંદ કરીશું, ત્યારે આપણું કેનવાસ ફક્ત આપણા બટનના પરિમાણો સુધી ઘટાડવામાં આવશે.

હવે અમારી વેબસાઇટનો ભાગ એવા બધા તત્વોને એક પછી એક સાચવવાનો સમય છે અને અમે તેને પછીથી ઉપયોગ કરીશું તેવા છબીઓ ફોલ્ડરમાં સમાવવા. અમે અમારા કોડથી કોલ કરીશું અને અમે અમારા લેઆઉટ સાથે ચાલુ રાખીશું પરંતુ હવેથી અમારા કોડ સંપાદક દ્વારા.

તેમ છતાં વેબ પૃષ્ઠને લેઆઉટ કરવા માટેના ઘણાં સાધનો અને વિકલ્પો છે જે પ્રક્રિયાને સંપૂર્ણ સાહજિક બનાવે છે, તે ખૂબ જ મહત્વપૂર્ણ છે કે આપણે તેને આ કરવાનું શીખીએ જાતે. આ રીતે આપણે શીખીશું કે વેબ પૃષ્ઠની રચના પાછળના ફંડામેન્ટલ્સ શું છે.

સારાંશ:

1. ડિઝાઇન માળખું વેબસાઇટ જે તમે પરિવહન કરવા માંગો છો અને જે વિભાગો જે તમારે તમારી વેબસાઇટ પર બનાવવા આવશ્યક છે તેના પર વિશેષ ધ્યાન આપ્યું છે.
2. તમારા હાડપિંજર પર અથવા વાયરફ્રેમ એડોબ ફોટોશોપમાંથી જે સૂચવે છે કે કયા ક્ષેત્રમાં સમાવિષ્ટો દેખાશે અને તેનું બંધારણ.
3. તમે અગાઉ વિકસિત કરેલા પગલાં અને બ્રાંડ્સ પર આધાર રાખીને, પ્રારંભ કરો ડિઝાઇન વેબની સપાટી. બધા તત્વો (ફ્લોટિંગ અને ફિક્સ્ડ બંને) શામેલ છે. અનુરૂપ બટનો, લોગો અને છબીઓ શામેલ કરવાનું ભૂલશો નહીં.
4. એક પછી એક પ્રોજેક્ટનો ભાગ એવા બધા તત્વો કાપી નાખો. ખાતરી કરો કે તેમની પાસે યોગ્ય પગલાં છે અને તેઓ તમને પછીથી મુશ્કેલીઓ પહોંચાડશે નહીં.
5. ફોર્મેટમાં બધા તત્વો સાચવો PNG પ્રોજેક્ટ ફોલ્ડરની અંદર છબીઓ ફોલ્ડરમાં HTML.
6. ધ્યાનમાં રાખો કે આ પ્રોજેક્ટની વેબ વિંડોમાં આઉટપુટ હશે તેથી તે ખૂબ જ મહત્વપૂર્ણ છે કે તમે રંગ મોડને ધ્યાનમાં લો અને લાગુ કરો આરજીબી.
7. અન્ય વેબ પૃષ્ઠો દ્વારા પ્રેરણા લો કે જે તમે કામ કરવા પહેલાં પ્રશંસા કરો છો, અને તમારી ટીમના સભ્યો સાથે આ વિશે ચર્ચા કરવાનું ભૂલશો નહીં. જો તે ક્લાયંટ માટેનો પ્રોજેક્ટ છે, તો વળગી રહેવાનો પ્રયાસ કરો પરિષદ શક્ય હોય ત્યાં સુધી.