読者です 読者をやめる 読者になる 読者になる

45分で作れる高品質バナーの作り方,制作参考サイト

liskul.com photoshopvip.net

バナー、LPなどの参考サイト(自信のお気に入りを作成可能)

printerest www.pinterest.com lp-web.com ランディングページ作成 web60.co.jp ferret-plus.com

webディレクション検定用語

CSR 企業の社会的責任 - Wikipediaサイトガバナンス Webガバナンス - Wikipediaドロップシッピング ドロップシッピング - Wikipediawebサイト設計・制作フェーズ www.kansatsu.jpスコープの定義 5. 何をどこまでやるかを明らかに――スコープ定義CTR(クリッ…

シェイプの結合・中マドが便利、スマートオブジェクト,レイヤーカンプ、画像アセット、アートボード、レイヤーとアートボードの書き出し,camera RAWフィルター、レベル補正、ホワイトバランス調整

シェイプの結合・中マドが便利 www.ar-ch.org スマートオブジェクト helpx.adobe.com レイヤーカンプ photoshop.giren.net Photoshop ヘルプ | レイヤーカンプ スマートオブジェクト内のレイヤーカンプ [blogs.adobe.com 画像アセット helpx.adobe.comblogs.…

今日作ったバナー

photoshop(フリンジの削除、背景に自然なグラデーションをかける方法)

フリンジの削除・・・切り抜いた画像についた余分なピクセルデータを削除する方法 対象レイヤー選択し、レイヤー→マッティング→フリンジの削除 背景に自然なグラデーションをかける方法 今回はこの画像を使用します。 ①まず女性をペーンツールで囲います。 ②…

作業する上で大事なこと

デザイン レイヤーに対してフィルター機能をつけすぎないこと なるべくデータは軽くする。統合できるものは統合し、いらないデータは削除する。 コーディング FTP権限のパーミッションと設定方法 sugutsukaeru.jp SNSの設定 www.kibiji-office.com yachin29.…

サブライムテキストの使い方(どっとインストール),zen-coding,jQuery(文字を遅らせて表示させるプラグイン),イラストレーターで立方体を書く

matome.naver.jp サブライムテキストの使い方 http://dotinstall.com/lessons/basic_sublimetext/10501zen-coding designblog.ecstudio.jp jQuery(文字を遅らせて表示させるプラグイン) www.nxworld.net サンプル bxSlider Examples commte.net highfivecr…

Googleアナリティクス設定

liskul.com

PhotoshopでWebデザインを効率化するための便利な使い方(LIGからの引用),photoshopでレイヤーから画像を書き出す方法、Illustratorアセットの収集と一括書き出し

photoshopでレイヤーから画像を書き出す方法 レイヤー別にファイルを書き出す方法 (Photoshop CC)Illustratorアセットの収集と一括書き出し https://helpx.adobe.com/jp/illustrator/using/collect-assets-export-for-screens.html 取り上げている内容1. …

GAIQ試験対策の為の試験用語まとめ(途中)

utmパラメータ(カスタムキャンペーン) utmパラメータ(カスタムキャンペーン)とは何ですか? | 運営堂チャネルグループ Googleアナリティクスの新機能チャネルグループを活用してみた | MarkeStyle(マーケスタイル)アドバンスフィルタ Googleアナリティクス…

クロスリングをIllustratorで作成する方法、PHOTOSHOPで写真の一部のみを見せる方法、イラストレーターでドット柄作成、イラストレーターで文字を加工する、矢印を曲げる方法、手書き文字参考サイト

クロスリングをIllustratorで作成する方法 designers-tips.com PHOTOSHOPで写真の一部のみを見せる方法 ①写真を選択した状態でレイヤーマスクをcommandを押した状態でクリックする。するとベクトルマスクがでる。 ②コントロールパネルの左上にあるドロップダ…

画像からの水しぶきの抽出方法、firefoxでサイト画像を一括抽出する方法、basic認証によるパスワード設定の方法

画像からの水しぶきの抽出方法 liginc.co.jp firefoxでサイト画像を一括抽出する方法 リンク先の画像を一括ダウンロードする方法(「DownThemAll!」編)webwaza.wordpress.com basic認証によるパスワード設定の方法 allabout.co.jp photshopでなめらかな曲線…

html,css(違う端末で作業するための準備)

メタ情報(編集画面で確認) スマホ対応時必須リセット@charset "UTF-8"; /* CSS Document *//*reset*/ html,body,h1,h2,h3,h4,h5,h6p,dl,dt,dd,ul,li,small,header,nav,footer,main,section{font-family:"Hiragino Kaku Gothic proN", Meiryo, sans-serif; …

学習ツールと便利サイト

学習ツールschoo.jpイラストレーター,フォトショップのテクニックが色々掲載されているサイト Photoshop | NESTonline Blog http://dotinstall.com/dotinstall.com cyllabus.jpprog-8.com 便利サイトバナーサイト aka-design.sub.jpretrobanner.netバナーデ…

ワードプレスの便利なプラグイン

・複数機能提供系Jetpack by wordpress.com ・・・wordpress.com(多く使われているのはWordpress.org)で使用されている機能が使用出来る特徴①:サイト統計情報でアクセス数やどのページが人気かを確認できる 特徴②:パブリーサイズ共有でWordpressでの投稿時…

ポートフォリオサイト(別デザイン,バナー追加バージョン)

新デザイン Portfolio yellow1204.webcrow.jp ポートフォリオを別デザイン,バナー追加バージョンで作成してみました。 できるだけシンプルな構成にし読み込み時に重くならないように心がけて制作しました。

ローカルホストのワードプレスデータをサーバーへ移行

yachin29.hatenablog.com yachin29.hatenablog.com ①まず以下4つのファイルとファルダをバックアップ用のフォルダを作成してその中に入れます。①データベースのデータ r: #2196f3">★自身のデータベースの中のphpMyadminにアクセスし、構造のところでエクス…

Webのポートフォリオ

ポートフォリオ

ワードプレス(管理者権限の設定、ユーザー名及びパスワードを忘れた時の確認と変更方法)

★管理者権限の設定①ダッシュボードのユーザーから新規追加をして誰がどこまでのことをワードプレス内でできるかを設定します。※ 購読者:読めるだけ寄稿者:投稿をしても管理者の許可がないと表示されない投稿者:画像及び記事の投稿ができる編集者:管理者…

ワードプレス(プラグイン(カスタムフィールドテンプレート))

★ カスタムフィールドテンプレートを使用すると投稿毎に自身で設定した項目を入力するだけで簡単に更新ができます。①ダッシュボードのプラグイン→新規追加でcustom field templateをダウンロードして有効化させる。②設定→カスタムフィールドテンプレートの中…

便利情報(ワードプレス)

★ワードプレスのインストール一回で様々なページをシンプルに作成していく方法制作するサイトごとにワードプレスをインストールしなくてもいい方法を以下に記載します。①インストールしたwp-config.phpの名前の前に適当な文字を入れます。今回は@wp-config.…

簡易的に既存サイトをワードプレス化させる手順(プラグインの適用なしの状態)

今回は①ワードプレスで新規アカウントを作成してthemesフォルダの中に既存用のフォルダを作成し、その中に 全てのデータをコピーアンドペーストする。(今回はroseというフォルダ名にしました。) ②そのフォルダの中にindex.phpというデータとstyle.cssのデ…

ワードプレス(予約システム)

予約システムの導入d.hatena.ne.jp ①以下のサイトからプラグインのzipファイルをダウンロードする。 ②プラグイン→新規追加でダウロードしたプラグインをアップロードして有効化させます。③次に、ダッシュボードの予約システム→各種設定で予約パラメーター、…

Ps,Ai自主制作(下田 和政 さん著のPhotoshop x Illustrator テクスチャ・背景・壁紙デザインを使用)

※色や若干のデザインは変更している場合があります。 P22(Ps) P26(Ai) P28(Ai) P30(Ps) P33(Ps) P36(Ai) P41(Ai) P42(Ai) P45(Ai) P46(パターンをAiで作成、背景画像をPsで作成) P49(パターンをAiで作成、背景画像をPsで作成) P50(Ai,Ps) P55(Ai) P58(Ai) P6…

7月7日 授業内容(CSSで計算式を可能にするcalc()ファンクション、無限スクロールの制作)

CSSで計算式を可能にするcalc()ファンクションyachin29.hatenablog.com ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 中の箱の可変しても感覚は変わらない <html> <head> <meta charset="UTF-8"> <title>CSSで計算式を可能にするcalc()ファンクション</title> <style> html,body,ul,li{font-family:"Hiragino Kaku Gothic proN", Meir</meta></head></html>…

無限スクロール(LazyLoad)

無限スクロール http://yachin29.hatenablog.com/entry/2016/03/05/091202yachin29.hatenablog.com LazyLoad yachin29.hatenablog.com ①LazyLoadようのフォルダを作成し、imgファルダを作成してその中に5枚ほど画像を入れる。 jsファイルを作成する②以下の…

イラストレーター自主制作(講師ブログ参照編  http://web-illustrator.hatenablog.jp/)

かすれ文字 必要な機能:効果→パスの変形→ラフ テキストを手書きスケッチ風に 必要な機能:効果→スタライズ→落書き グラデーションを使用したイラスト ①王冠の半分をペンツールで描きリフレクトツールで垂直軸にコピー パスが離れているので王冠の上の方は2…

フォトショップでの自主制作(下田 和政さん著のPhotoshop アイコン&マーク,ロゴデザインを使用して作成)

基本的には教科書どうりに仕上げましたが、本来付属の背景画像と一緒に制作するところを自主制作した背景画像で仕上げました。P26 P30 P34 P40 P42 P43 P44 P48 P50 P55 P58 P63 P64 P74 P78 P82 P86 P90 P94 P98 P99 P100 P104 P118

イラストレーターでの自主制作(下田 和政さん著のIllustrator テクニックファイル アイコン&マークデザインを使用して作成)

後ほど主に使用した機能をまとめます。P22 P26 P29 P32 P34 P36 P38 P42 P46 P50 P54 P58 P62 P65 P70 P76 P82 P88 P92 P96 P100 P106 P110 P114 P120 P123 P126 P130 P134 P138 P140 P145 P148

Dreamweaverの便利な機能(日付の自動更新、アセット,ページプロパティの利用(エンコードの変更、背景を見ながらのコーディング、テンプレート作成(編集可能領域、登録したテンプレートで新規作成)))

日付の自動更新 <html> <head> <meta charset="UTF-8"> <title>無題ドキュメント</title> </head> <body> <p> 更新日: 2016年07月01日 </p> </body> </html> アセット(100ページ以上あるような場合においてアセットに登録したものをそれぞれのページに入れていれば、使用しているアセットの内容を変更するだけで全ての内容を記述通り更新して…

Maisonry利用時の画像の高さを自動調整する方法

要素をグリッド状に表示してくれる(Maisonry) yachin29.hatenablog.com ★index.html内でのscriptの記述を以下のように変更すると高さの違う画像を使用していても自動調整してくれます。 変更するのは以下の3つ

6月30日 授業内容(SVGを使ったアニメーション,新しいモバイルフレンドリーテスター)

yachin29.hatenablog.com Panizzon Embalagens - Frascos e Embalagens Plásticas ①イラストレーターで800 x 300 ピクセルで新規作成。②好きな文字を記入して、書式→アウトラインを作成する。(※アウトライン化後書体やフォントサイズは変更できない)③別名…

6月29日 授業内容(youtubeへの動画のアップロード,Ai,PsからのCSSの書き出し)

youtubeへの動画のアップロード①youtubeのアカウントにログインし、アップロードを押す。(公開、非公開を選ぶこと) ②アップロードする動画を選択し、確認後アップロードする。 埋め込み用のコードが出てくるのでもしページ内に載せる場合はこちらを使用。 …

授業内容(filter機能を使ったアニメーション(ニューストリッカー)、css3フィルターアニメーション(blur,sepia,saturateなど))

過去の授業内容を踏まえてニューストリッカー(テロップのようなもの)を作りました。 paris1204.hatenablog.comcss3フィルターアニメーション obomemo.com ※フィルターを使用するときはCan I use でブラウザーが対応しているか確認すること。 今回はchrome…

PHPでRSSの取得

RSSの取得 web-design-exercise.hatenablog.jp

Wordpressのカスタマイズ,外部RSSの設定,予約システムの設定,urlのショートコードの作成(googleとbitly),RSSでヤフーニュースを埋め込む簡易説明

Wordpressのカスタマイズ 授業ではこの教材を使用します。 作成については講師ブログと著者ブログ参照web-design-exercise.hatenablog.jpwebdesignrecipes.com 外部RSSの設定 「RSS」の検索結果 - Webデザインの勉強 3月22日開講クラス フェリカテクニカルア…

6月22日 授業内容(イラストレーター)

ピクトグラム(2014年1月8日)はてな 完成作品 ①A4サイズで新規作成する。②画像をダウンロードしイラストレーターで配置する。 ③全体的な指定 まずこの絵はすべて顔、目、鼻、口、胴体はほぼ共通なので左上の赤ちゃんの顔、目、鼻、口、胴体を描く。 胴体の部…

6月21日 授業内容(CSSスプライト用画像をフォトショップで作成しPC,タブレット、スマホ用にレイアウト(jsでスマホの時のみアコーディオンになる設定))

CSSスプライト用画像をフォトショップで作成(作成途中) 今回はPC用は幅960px,高さ300px タブレットは幅128px(タブレットの最小単位768pxの6分割),高さ300pxで画像を作成する。 ※スマホは画像ではなくcssで指定する。完成形 ①PC用サイズで新規作成し、新規レ…

6月20日 授業内容(Illustrator(DTP))

フライヤー DTP(アクセス用パスワードあり) はてな使ったツール ペンツール、グラデーションツール、リフレクトツール、ダイレクト選択ツールの等間隔コピー、四角形をctrl +shift +矢印で幅を変える、 直線ツールの文字の端を丸くする、等間隔の破線の設定…

授業内容(コンテンツスライド、CSSスプライト)

指定したグリッドの計算を自動でしてくれるツール www.kenjisugimoto.com http://yachin29.hatenablog.com/entry/2015/02/04/003131yachin29.hatenablog.com PC タブレット スマホ black-flag.net このサイトの記述と同じようにしてslide.jsとslide.cssに分…

6月16日 授業内容(ゲストブック-データ表示機能)

ゲストブック-データ表示機能昨日作成したゲストブックのindex.phpから必要情報を入力しデータベースに溜め込みます。そして、データベースからデータを取り出すページ(list.php)を作成して入力内容がデータベースにきちんと保存書き込まれているかを確認し…

Wordpressのテンプレート(Biz vektor(無料),賢威(無料),ワードプレス無料ダウンロード,CMS)

Biz vektor(無料) bizvektor.com 賢威(無料) www.seo-keni.jp ワードプレス無料ダウンロード 翔泳社『10日でおぼえるシリーズ』:ダウンロード テンプレートを使ってその中にリンクを指定してはめ込みます。 ↓ ①ダウンロードデータをWordpressのテンプレート…

6月14日 授業内容(データベース(データのデータベースへの送信の一連の流れ))

ゲストブック作成 web-design-exercise.hatenablog.jp確認画面作成 web-design-exercise.hatenablog.jp データベースに値を挿入 web-design-exercise.hatenablog.jpindex.php

Illustrator(こんな物を作ってみました)

①ペンツールで丸を含む線を書く ②alt +shiftを押しながら書いたものを直線上に複製する ③オブジェクト→ブレンドオプションでステップ数(間にどれだけコピーをしてほしいかどうか)を指定する オブジェクト→ブレンド→作成でブレンドを作成する。 ④この状態だ…

6月13日 授業内容(データベースとの連携、ゲストブック作成-設計、  Masonry,isotope(画像の幅に合わせて自動的に配列が変わる))

データベースとの連携 web-design-exercise.hatenablog.jp '; // データベースの選択に失敗した場合 if( mysql_select_db( 'mydb', $myId …

phpのフレームワーク

phpのフレームワーク CakePHP v3.2 - 高速開発PHPフレームワーク Webデザインの勉強 1月20日開講クラス フェリカテクニカルアカデミー

6月8日 授業内容(データベース(ORDER BY(昇順、降順))、メガドロップダウンメニュー)

SQLを使う Select文で検索(前回の内容も含む) web-design-exercise.hatenablog.jp※降順、昇順の並び替え データベース知識確認テスト(目を通しておく) web-design-exercise.hatenablog.jp メガドロップダウンメニュー web-design-exercise.hatenablog.jp

ホームページ設計思想

ホームページ設計思想 ★左側の方がシンプルに見えて余裕があるイメージ(最近の設計思想)で情報が選びやすい。 大企業のホームページに多い 右は少し前の物で余裕がないイメージ(少し前の設計思想)で中小企業のサイトで多かった

Indesign(他のアプリケーションからのファイルの読み込み)

他のアプリケーションからのファイルの読み込み Adobe InDesign * 他のアプリケーションからのファイルの読み込み エクセルデータをIndesignで読み込む手順 Excel ファイルを読み込む方法 (InDesign CC)