2019-09-22から1日間の記事一覧
CC以前のバージョンだと（私はCS5,6を使用していました）自由にトリミングが 出来ていましたが、CCだと比率でしかトリミングが出来ずに困っていました。 どうしたら自由なサイズにトリミングが出来るのかというと設定をしなければいけなかったようです。Phot…
20x20pxの正方形を4つ作り２x２に並べ、好きな色をつけ、（※左下のブロックは必ず塗りを白色に設定する）スウォッチに登録します。 好きなサイズでオブジェクトを作り、上で作ったパターンを適応させる いつでもギンガムチェックのパターンが使えるようにす…
ポートフォリオをPDF形式で面接先の会社にメールで送りたいのにPDFのデータが非常に大きく、困ってしまう。就職活動中によくある事です。 IllustratorからデータをPDFで書き出す場合、書き出す形式に気をつけないと、必要以上にデータ量が大きくなってしまう…
よくバナーなんかで見る、放射状の背景。作り方は色々なやり方がありますが、１番簡単なのは楕円を線のみにして、「線幅」と破線の「線分」と「間隔」で調整するやり方です。 １、まずは300✕250の長方形を作り、塗りの色を放射状の片方の色に設定する。塗り…
Illustratorのアートブラシとアピアランス機能を使ってブラシで描いたイメージのクールなロゴを制作してみましょう。Illustratorのブラシライブラリーにはアーティスティックなものから幾何学模様まで、さまざまな種類のブラシが用意されています。これらを…
トンマナ とは、「トーン＆マナー」の略で、 広告 における デザインの一貫性を持たせることを指します。 また、ブランドのイメージカラーとホームページのデザインカラーを 合わせる必要があるなど、「 トンマナ 」は 企業部 ブランディング においても重要…
文字ツールを使う 文字入力（配置したい位置ではなく、別の開いているスペースで入力する） 入力後、移動ツールで配置したい位置に置く 見出しを書く時はクリックして文字を書き始める 段落文を書きたい場合はドラッグで段落文の範囲を決める（禁則処理を「…
トーンカーブを使った補正 トーンカーブはデータの劣化をおこさずに細やかな補正ができます。 トーンカーブを使えば「明るさ・コントラスト」、「レベル補正」でできることはもちろん、最大で14個のポイント（制御点）を作成しより微妙な部分の調整をおこな…
Photoshopの基本的な使い方 画像を作る。 画像を補正する。 画像を加工する。 Photoshopの初期化 目的は、無駄に消費されているメモリの記憶をリセットすること。 特に容量があまりないPCだと尚更です。 アイコンをダブルクリック等で起動。 このとき［Ctrl…
psgips.blog.fc2.com 焼き印のようなロゴを作る 白い台紙とロゴ画像を1つのレイヤーに結合する 結合したレイヤーを選択し「フィルター→ノイズ→ダスト＆スクラッチ」を選択し、「半径：4」でクリック。全選択でコピー。 木のテクスチャにペーストし、チャンネ…
元画像 Photoshopの加工で一番大事なのはレイヤー構造です。レイヤー構造を理解する事で幅の広い加工が出来るようになり、バナー作成などにも役に立つので、様々な加工方法を覚える事がPhotoshop上達の一番の近道です。 まずはレイアー構造をしっかりと把握…
元画像 Photoshopの加工で一番大事なのはレイヤー構造です。レイヤー構造を理解する事で幅の広い加工が出来るようになり、バナー作成などにも役に立つので、様々な加工方法を覚える事がPhotoshop上達の一番の近道です。 まずはレイアー構造をしっかりと把握…
GIFアニメーション（ジフアニメーション、GIF animation）は、 Graphics Interchange Format (GIF) の「マルチイメージ」を 使ったアニメーション。アニメーションGIF (animated GIF) ともいう。一時はFlashや動画に取って変わられ見る事も少なくなりました…
以前はwebサイト制作のワークフローとして、Photoshopでカンプを作成し、画像を書き出す為に「スライスツールで各画像を切り出す」という作業を行なっていましたが、この「スライスツールで画像を切り出す」という作業が色々と制約があり、とても細かい作業…
Animate On Scroll Library michalsnik.github.io 使いやすいです！ スクロールすると、コンテンツが色々なエフェクトで表示される。 <html lang="ja"> <head> <meta charset="utf-8"> <title>Animate On Scroll Library プラグイン</title> <style> html,body { margin:0; padding:0; } body { background:url(img/main.jpg) n</meta></head></html>…
スマートフォンでももちろんjQueryの click イベントは基本的に有効です。 しかし、スマートフォンやタブレットで click イベントを動かそうとすると、１テンポ遅れたもっさりとした動きになります。そこで出てくるのが「touch」イベントです。 PCでは判りま…
vegas.jaysalvat.com img要素をスライドさせるプラグインは沢山ありますが、背景画像をスライドさせる「VEGAS 2 BACKGROUND SLIDESHOW」を使用します。 <script> $(function(){ $('header').vegas({ transition: 'fade', slides: [ { src:'img/01.png' }, { src:'img</script>…
jQueryはライブラリーという性質上、どうしても動作が重くなってしまいます。PCではあまり気にならなくても、パフォーマンスの低いスマートフォンでは読み込み速度が遅くなる、という事が良くあります。 jQueryを適切に記述する事である程度の改善は出来るの…
今回のやり方はユーザーエージェントでスマホかPCか判別してやる方法です。 ユーザーエージェント ユーザーエージェント（UserAgent）とはウェブサイトに訪問する際「Google Chromeからアクセスしています」「iPhoneからアクセスしています」などのどんな環…
レスポンシブサイトでは、読み込み時だけで無く、ブラウザーをリサイズした時にもイベントが反応するようにしなければいけない場合があります。 例えばPC時では通常のナビゲーションボタンでスマホ時にはハンバーガーメニューの時などです。PC時ではナビゲー…
ページネーション（pagination）とは、日本語でページ割りという意味で、Web制作においては、検索結果一覧など、内容の多いページを複数のWebページに分割し、各ページへのリンクを並べてアクセスしやすくするために設置します。 github.comBootStrap CDN ve…
複数のjQueryプラグインを使って、フィルタリング機能とモーダルウィンドウを使ったギャラリーを作成しましょう。 複数のプラグインを使うことで、管理すべきファイルの数が多くなるので、気を付けましょう。 参考サイト chiyo-katsumasa.com <html lang="ja"> <head> <meta charset="utf-8"> <title>mix it up</title></meta></head></html>…
パララックスとは、視差効果のことです。 Webデザインにおけるパララックスはスクロールなどの動作に応じて、 複数のレイヤー（層）にある要素を異なるスピードで動かすことで、 「立体感や奥行きを演出」、「フェード・拡大縮小・回転などの視覚的エフェク…
Cookie（クッキー）とは？ Cookie（クッキー）とは、ホームページを訪問した ユーザーの情報を一時的の保存する仕組み、またはそのデータです。ID、パスワード、メールアドレス、訪問回数などが ユーザー情報として保存されます。これによって再訪問したとき…
Youtubeのデータをサイトに埋め込む、jQueryプラグイン「videobackground」を使ってみます。 YouTubeの動画を使うので、自前のサーバーのレスポンスを気にする必要がありません。さらにフリーのレンタルサーバーの多くは動画のような大きなデータのアップが…
svgをcss3のアニメーションで動かす場合、下記のようにsvgファイルのコードをインラインでbody内に入れる必要があります。 <body> <svg class="likeButton" width="500px" height="500px" viewBox="0 0 500 500"> <circle class="explosion" r="150" cx="250" cy="250"></circle> <g class="particleLayer"> <circle fill="#8CE8C3" cx="130" cy="126.5" r="12.5"/> </circle></g></svg></body>
通常であれば以下の記述で良いのですが、以下の記述では「#」がついているアンカーポイントには全てスムーススクロールでリンクされてしまいます。 #がついている全てにスムーススクロールさせる場合 $(function(){ // #で始まるアンカーをクリックした場合…
Ajaxとは「Asynchronous（エイシンクロナス） JavaScript + XML」の略です。簡単に言えばJavaScriptとXMLを使って非同期にサーバとの間の通信を行うことが出来ます。 通常Webページの内容を変更するためには画面遷移やリロードする必要がありますが、ajaxを…
スクロールイベント 今まで授業では、要素が読み込まれたら動くという「$function」とクリックしたら動くという「on.click」イベントの2つを主にやってきましたが、今回はそれに加えてウィンドウをスクロールしたら動く、「スクロールイベント」をやってみま…
scrollイベント 要素がスクロールした時のイベントとして関数を指定できます。 scrollTopイベント 「scrollTop()」を使用した場合、要素の最上部から縦スクロールした現在位置の上部までのピクセル数を取得します。 { scrollTop: 0 }であればtopから0ピクセ…
