先月に引き続き、架空のカフェのHPを作っていきます。前回はHTMLを書いて終わっていましたが、今回はCSSを用いて全体のデザインを整えました。 shika16.hatenablog.com TOPページ 前回からの変更点としては、全ページに共通することとしては ・Illustratorを…

今回は、HPに使う料理写真をおいしく見せられるような加工を施していきたいと思います。 helpx.adobe.com helpx.adobe.com 1.クレープをおいしく加工 元画像がこちら。これをよりおいしく見えるよう加工していきます。 トーンカーブを調整し、色調補正します…

今月から、HP制作に取り掛かります。先日記事にて作ったワイヤーフレームを元に、架空のカフェのホームページを作っていきます。今月は、HTMLを用いて制作を行います。 shika16.hatenablog.com まずはこちらがTOPページのコード。キービジュアルの下に「NEWS…

今月は、Illustratorを用いてHPのワイヤーフレームを作成した。架空のカフェのホームページ制作を予定している。 まず初めに、Illustratorを開いてグリッド表示の設定を行う。 目盛の表示設定も終えたところで、グリッドに沿って背景やタイトル画像、メニュ…

高橋朋代ほか『作りながら学ぶHTML/CSSデザインの教科書』(SBクリエイティブ、2016年〔初版:2013年〕)を読了した。全ページフルカラー、HP制作のノウハウの基礎がバランス良く詰め込まれた内容と言える。 HTML、CSS、画像編集、JavaScriptと順を追って解説が…

デジタルハリウッド『Webデザイン Illustrator&Photoshop』(技術評論社、2011年〔初版:2009年〕)を読了した。IllustratorとPhotoshopを用いてホームページのイメージを形作っていく過程が分かりやすく書かれていた。CD-ROMも附属しており、本書の内容に沿っ…

今回は、Illustratorでのロゴ作成に挑戦しました。 helpx.adobe.com ①パーツを作る 我が家にあるマイベースです。これを元にロゴを作っていきたいと思います。 ベースのパーツを1つ1つ分解するような感じで、その形を作ります。 ②着色 シンプルなロゴにした…

今回は、Photoshopの写真修正機能を使って絵に加工を施していきたいと思います。 helpx.adobe.com ベースとなるのは、日本史の教科書をぱらぱらとめくっていた時に目に飛び込んできた『蒙古襲来絵詞』(筆者不明、1293年頃)です。 主にスポット修復ブラシツー…

前回記事同様、Photoshopも先月から触れているため何か作ってみようということで今回はこちらを参考に合成写真を作りました。たまたまTwitterを眺めていたら目に入ってきた葛飾北斎の『富嶽三十六景 神奈川沖浪裏』を実写版で作ろうと試みました。 helpx.ado…

先月からIllustratorの基礎を学び始めたものの、せっかくなら何か作ろう・・・ということで今回はこちらを参考にアイコン作成を行いました。シンプルながらも分かりやすいアイコンをデザインするのもなかなか難しいなあという感じでしたが・・・Illustrator…

『Webデザインの基本ルール―プロに学ぶ、一生枯れない永久不滅テクニック―』を読了した。前回記事の『ノンデザイナーズ・デザインブック』と比べ、「Webデザイン」に特化した内容であり、フルカラー＋実際のホームページ画像＋解説の多さで非常に分かりやす…

先月、Robin Williams『ノンデザイナーズ・デザインブック』を読了した。 「デザイン」という分野に深く触れるのは初めてのことであり、今までは「才能に依るところが大きい」とばかり考えていた。そのため、学校で出された課題やポスターを作る機会には、極…